31:T990,chart = { function toDHMS(seconds, full = true) { let secNum = parseInt(seconds, 10); let days = Math.floor(secNum / (3600 * 24)); let hours = Math.floor((secNum % (3600 * 24)) / 3600); let minutes = Math.floor(((secNum % (3600 * 24)) % 3600) / 60); let secs = Math.floor(((secNum % (3600 * 24)) % 3600) % 60); // hours = (hours < 10 ? '0' : '') + hours; minutes = (minutes < 10 ? '0' : '') + minutes; secs = (secs < 10 ? '0' : '') + secs; return full ? `${days} days ${hours}h ${minutes}m ${secs}s` : `${days > 0 ? days + "d " : ""}${hours}:${minutes}.${secs}`; } const svg = d3.select(DOM.svg(width, height)); svg .append("g") .selectAll("g") .data(data) .join("g") .attr("stroke", "white") .selectAll("rect") .data(d => d.values) .join("rect") .attr("fill", d => d3.interpolateRdYlGn(d.x1 / x.domain()[1])) .attr("x", d => x(d.x0)) .attr("y", d => y(d.y0)) .attr("width", d => x(d.x1 - d.x0) - margin.left) .attr("height", y.bandwidth()) .attr("rx", "2.5") .on("mouseover", function() { tooltip.style("display", "inline"); }) .on("mouseout", function() { tooltip.style("display", "none"); }) .on("mousemove", function(d) { var xPosition = d3.mouse(this)[0] + 8; var yPosition = d3.mouse(this)[1] - 5; tooltip.attr( "transform", "translate(" + xPosition + "," + yPosition + ")" ); tooltip.select("text").text(toDHMS(d.value * 60 * 60, false)); }); svg .append("g") .attr("fill", "black") .attr("text-anchor", "start") .style("font", "12px sans-serif") .selectAll("text") .data(data) .join("text") .attr("x", d => x(d.total) + 4) .attr("y", (d, i) => y(i) + y.bandwidth() / 2) .attr("dy", "0.35em") .text(d => `${d.values.length} | ${format(d.total)} hrs`); svg.append("g").call(xAxis); svg.append("g").call(yAxis); var tooltip = svg .append("g") .attr("class", "tooltip") .style("display", "none"); tooltip .append("rect") .attr("width", 70) .attr("height", 20) .attr("fill", "white") .attr("rx", "5") .attr("stroke", "black") .style("opacity", 0.75); tooltip .append("text") .attr("x", 33) .attr("dy", "1.2em") .style("text-anchor", "middle") .attr("font-size", "12px") .attr("font-weight", "bold"); return svg.node(); }32:T5c7,data = { /* First massage data, grouping connection durations by date */ var d = d3 .nest() .key(d => d.name) .entries( /* return each entry as { name: "01 Jan 20", value: 23.00 } */ connectionData .map((el, idx) => ({ name: el[0] .split(" ") .slice(0, 3) .reduce((acc, el) => (acc += " " + el)), value: +Math.abs( (new Date(el[0]) - (idx == 0 ? new Date() : new Date(connectionData[idx - 1][0]))) / (60 * 60 * 1000) /* convert milliseconds to hours */ ) })) .filter( /* filter out erroneous short durations */ (el, idx, arr) => el.value > 0.01 ) ) /* Calculate a total for each group */ .map((el, idx) => { el.total = +el.values .reduce((acc, el) => { return acc + el.value; }, 0) .toFixed(2); return el; }); //.sort((a, b) => b.values.length - a.values.length || b.total - a.total); /* Iterate over each group of dates and set x0, y0, x1 values to be used when displaying the bar chart */ d.forEach((group, index) => { var x0 = 0; var y0 = 0; group.values.forEach(entry => { entry.y0 = index; entry.x0 = x0; entry.x1 = +(+entry.value + x0).toFixed(2); x0 = entry.x1; }); group.total = group.values[group.values.length - 1].x1; }); /* finally return the data */ return d; }33:[{"id":"987db817da0314d7fd5d6db14f3f1d683bb64460305e6bf896b1266b6be088098e1862ad532bc3ea492c3a330c4c6d746dab12d4302837e7235fb273c93b8b50","href":"https://static.observableusercontent.com/files/987db817da0314d7fd5d6db14f3f1d683bb64460305e6bf896b1266b6be088098e1862ad532bc3ea492c3a330c4c6d746dab12d4302837e7235fb273c93b8b50","name":"ip-address.json","type":"application/json","lastModified":1584080839927.507,"size":9644}] 2f:{"title":"ISP Connection Duration (hrs)","cells":[{"id":0,"value":"md`# ISP Connection Duration (hrs)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"md`ISP connection data received via MQTT subscription\n\nMy Australian National Broadband Network connection is delivered using VDSL. It normally syncs at around 90Mbps, which is pretty close to the advertised 100Mbps that I'm paying for. Unfortunately some days the connection is more stable than others.\n\nThis graph represents the number of connections, and the total duration for that day until the next re-connection.\n\nIf the connection remains up for a week then I'm doing well.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":682,"value":"viewof button = {\n const form = html``;\n form.button.onclick = event => {\n event.preventDefault(); // Don’t submit the form.\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":989,"value":"{\n let msg = mqtt.isConnected()\n ? md`\n| | min | max |mean | median | ${tex`\\sigma`} (Std Deviation) |\n| - | - | - | | - | - |\n| Connection duration (hrs) | ${d3.min(durations)} | ${d3.max(\n durations\n )} | ${d3.mean(durations).toFixed(2)} | ${d3\n .median(durations)\n .toFixed(2)} | ${d3.deviation(durations).toFixed(2)} |\n| Reconnects (per day) | ${d3.min(reconnects)} | ${d3.max(\n reconnects\n )} | ${d3.mean(reconnects).toFixed(2)} | ${d3\n .median(reconnects)\n .toFixed(2)} | ${d3.deviation(reconnects).toFixed(2)} |\n| | | | |\n`\n : md`Awaiting MQTT data`;\n return html`${msg}
\n${dot}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":787,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":838,"value":"durations = connectionData\n .map(\n (el, idx) =>\n +Math.abs(\n (new Date(el[0]) -\n (idx == 0 ? new Date() : new Date(connectionData[idx - 1][0]))) /\n (60 * 60 * 1000)\n ) /* convert milliseconds to hours */\n .toFixed(2)\n )\n .filter(el => el > 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":901,"value":"reconnects = data.map(el => el.values.length)","pinned":false,"hidden":false,"mode":"ojs"},{"id":708,"value":"md`

\n## Chart options and helper functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"barHeight = 25","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"height = data.length * barHeight + margin.top + margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"margin = ({ top: 50, right: 50, bottom: 50, left: 65 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"format = x.tickFormat(20)","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"x = d3\n .scaleLinear()\n .domain([0, d3.max(data, d => d.total)])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"y = d3.scaleBand()\n .domain(d3.range(data.length))\n .range([margin.top, height - margin.bottom])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":458,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(x).ticks(width / 80))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"yAxis = g =>\n g.attr(\"transform\", `translate(${margin.left},0)`).call(\n d3\n .axisLeft(y)\n .tickFormat(i => data[i].key)\n .tickSizeOuter(0)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1095,"value":"t = d3\n .transition()\n .duration(750)\n .ease(d3.easeLinear)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1034,"value":"dot = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"md`

\n### MQTT options and connection setup`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"options = ({\n host: 'io.dack.com.au',\n port: 443,\n topics: ['home/office/gateway/ips-full/json'],\n useTLS: true,\n username: \"web\",\n password: \"web\",\n path: \"/mqtt\",\n cleansession: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"/* clientOptions used in mqtt.connect(), called when connect button is pressed */\nclientOptions = ({\n timeout: 3,\n useSSL: options.useTLS,\n cleanSession: options.cleansession,\n userName: options.username || \"\",\n password: options.password || \"\",\n onSuccess: onConnect,\n onFailure: onFailure\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"mqtt = new Paho.Client(\n options.host,\n options.port,\n options.path,\n \"web_\" + parseInt(Math.random() * 100, 10)\n );","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"function onConnect(reconnect) {\n mqtt.onMessageArrived = onMessageArrived;\n options.topics.forEach(topic => {\n mqtt.subscribe(topic, { qos: 0 });\n });\n mutable connectionStatus = `Disconnect ${options.host}`;\n d3.select(dot)\n .selectAll(\"circle\")\n .transition(t)\n .style(\"fill\", \"green\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"function onConnectionLost(e) {\n mutable connectionStatus = `Connection to server lost: ${e.errorMessage}`\n d3.select(dot)\n .selectAll(\"circle\")\n .transition(t)\n .style(\"fill\", \"red\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1119,"value":"function onFailure(e) {\n mutable connectionStatus = `Failed to connect to server: ${e.errorMessage}`\n d3.select(dot)\n .selectAll(\"circle\")\n .transition(t)\n .style(\"fill\", \"red\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"function onMessageArrived(message) {\n mutable connectionData = eval(message.payloadString)\n .map(Object.values)\n .sort((a, b) => (Date(a) > Date(b) ? -1 : 1));\n d3.select(dot)\n .selectAll(\"circle\")\n .transition(t)\n .style(\"fill\", \"blue\")\n .transition(t)\n .style(\"fill\", \"green\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1116,"value":"mutable connectionStatus = `Connect to ${options.host}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"mutable connectionData = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":1206,"value":"{\n button;\n if (mqtt.isConnected()) {\n mutable connectionStatus = `Disconnect ${options.host}`;\n mqtt.disconnect();\n mutable connectionStatus = `Connect ${options.host}`;\n d3.select(dot)\n .selectAll(\"circle\")\n .transition(t)\n .style(\"fill\", \"red\");\n } else {\n mutable connectionStatus = `Connecting to ${options.host} ...`;\n mqtt.connect(clientOptions);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"md`

\n### Libraries and test data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"/*\n Test data if you don't have an MQTT Broker handy\n*/\ntest_data = FileAttachment('ip-address.json').json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"d3 = require(\"d3@5\", \"d3-array@^2.2\", \"d3-transition\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"Paho = require(\"paho-mqtt\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}