31:T40a,Plot.plot({ width, height: 200, grid: true, x: { label: "Date", type: "time" }, y: { label: "Retry Rate (%)", percent: true }, marks: [ movingAvg[0] ? Plot.line( julySubset, Plot.windowY({ x: "date", y: (d) => getRetryRate(d.pkts_tx + d.pkts_rx, d.retries), // k: julySubset.length / 100, k: k * 60, stroke: "orange", title: (d) => `Date: ${fmtDate(d.date)}\nRetry rate (%): ${( getRetryRate(d.pkts_tx + d.pkts_rx, d.retries) * 100 ).toFixed(2)}`, tip: true }) ) : Plot.lineY(julySubset, { x: "date", y: (d) => getRetryRate(d.pkts_tx + d.pkts_rx, d.retries), tip: true, title: (d) => `Date: ${fmtDate(d.date)}\nRetry rate (%): ${( getRetryRate(d.pkts_tx + d.pkts_rx, d.retries) * 100 ).toFixed(2)}`, stroke: "steelblue" }) ], caption: "" })32:T416,It looks like the number of devices connected to the network has some correlation with average SNR. When many devices are connected and actively transmitting and receiving data, there may be more signal interference between devices. This in turn could lead to slower data transfer rates. For average data retry rate, there are a few very high peaks, but if we zoom into a region without those anomalies, there does seem to be a correlation between a greater number of devices connected and higher retry rates. For an example, deselect the checkbox. We've seen that between 9 am and 5 pm, roughly, is when a substantial number of devices are connected to the network. ### But are these devices evenly distributed across different APs, or are certain APs handling the majority? Are there any APs which are being underutilized even during those periods of high demand? #### Hover over a line to check which AP it represents. Deselect the checkbox to see only the data for that AP, or use the next line chart to magnify the view on a specific AP.33:Td64,animatedBarchart1 = { const tooltip = new BarTooltip(); const width = 1100; const height = 900; const marginTop = 20; const marginRight = 0; const marginBottom = 30; const marginLeft = 40; const x = d3 .scaleBand() .domain(collapsedStateCounts.map((d) => d.fieldVal)) .range([marginLeft, width - marginRight]) .padding(0.1); const xAxis = d3.axisBottom(x).tickSizeOuter(0); const y = d3 .scaleLinear() .domain([ 0, d3.max(collapsedStateCounts, (d) => d3.sum([d.st1, d.st2, d.st3, d.st4, d.st5]) ) ]) .nice() .range([height - marginBottom, marginTop]); const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr( "style", `max-width: ${width}px; height: auto; font: 10px sans-serif; overflow: visible;` ); // Create a stacked bar for each ap const bars = svg .append("g") .selectAll("g") .data(collapsedStateCounts) .join("g") .attr("transform", (d) => `translate(${x(d.fieldVal)}, 0)`); bars .selectAll("rect") .data((d) => [ { name: "st1", value: d.st1 }, { name: "st2", value: d.st2 }, { name: "st3", value: d.st3 }, { name: "st4", value: d.st4 }, { name: "st5", value: d.st5 } ]) .join("rect") .attr("x", 0) .attr("y", (d) => y(d3.sum([d.value, ...d3.range(d.index).map((i) => d[i].value)])) ) .attr("height", (d) => y(0) - y(d.value)) .attr("width", x.bandwidth()) .attr("fill", (d) => colorScale(d.name)); bars .on("mouseover", (event, d) => tooltip.show(event, d)) .on("mouseout", (event) => tooltip.hide(event)); const labels = svg .append("g") .attr("font-size", "10px") .attr("text-anchor", "middle") .selectAll("text") .data(collapsedStateCounts) .join("text") .attr("x", (d) => x(d.fieldVal) + x.bandwidth() / 2) .attr("y", (d) => y(d.st1) - 5) .attr("opacity", "0") .text((d) => d.fieldVal); labels .on("mouseover", (event, d) => tooltip.show(event, d)) .on("mouseout", (event) => tooltip.hide(event)); svg.append(() => tooltip.node); // Create the axes // const gx = svg // .append("g") // .attr("transform", `translate(0,${height - marginBottom})`) // .call(xAxis); const gy = svg .append("g") .attr("transform", `translate(${marginLeft},0)`) .call( d3 .axisLeft(y) .tickFormat((y) => y >= 1000 ? (y / 1000).toFixed(0) + "k" : y.toFixed() ) ) .call((g) => g.select(".domain").remove()); svg .append("text") .attr("x", width / 2) .attr("y", height - 10) .attr("text-anchor", "start") .text("Access point"); svg .append("text") .attr("x", -height / 2) .attr("text-anchor", "start") .attr("transform", "rotate(-90)") .text("Count of Records"); // Return the chart, with an update function that takes as input a domain // comparator and transitions the bar positions and their labels accordingly. return Object.assign(svg.node(), { update(order) { x.domain(collapsedStateCounts.sort(order).map((d) => d.fieldVal)); const t = svg.transition().duration(750); bars .data(collapsedStateCounts, (d) => d.fieldVal) .transition(t) .delay((d, i) => i * 20) .attr("transform", (d) => `translate(${x(d.fieldVal)}, 0)`); } }); }34:T63a,function generateTreemap(data) { const tooltip = new Tooltip(); const width = 1100; const height = 600; // Create a hierarchy from the data const root = d3 .hierarchy({ children: data }) .sum((d) => d.count) .sort((a, b) => b.value - a.value); // Create a treemap layout const treemap = d3.treemap().size([width, height]).padding(1).round(true); // Generate the treemap layout treemap(root); // Create the SVG container const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto; font: 11px sans-serif;"); // .call(d3.zoom().scaleExtent([1, 8]).on("zoom", zoomed)); // Create a group for the treemap cells const cellGroup = svg .selectAll("g") .data(root.leaves()) .join("g") .attr("transform", (d) => `translate(${d.x0},${d.y0})`); // Create rectangles for each access point cellGroup .append("rect") .attr("width", (d) => d.x1 - d.x0) .attr("height", (d) => d.y1 - d.y0) .attr("fill", "#72b3b5") .attr("rx", 3) .attr("ry", 3) .attr("opacity", 1); // Add labels for each access point cellGroup .append("text") .attr("x", 5) .attr("y", 15) .style("pointer-events", "none") // Disable pointer events for the text .text((d) => `AP ${d.data.fieldVal}`); svg .selectAll("rect") .on("mouseover", (event, d) => tooltip.show(event, d)) .on("mouseout", (event) => tooltip.hide(event)); svg.append(() => tooltip.node); return svg.node(); }35:T73b,function collapser(inputArray) { const resultArray = []; let currentTimestamp = null; let apMap = new Map(); // Map to store AP details inputArray.sort((a, b) => a.timestamp - b.timestamp); // Sort by timestamp for (const entry of inputArray) { if (entry.timestamp !== currentTimestamp) { // Process the AP details for the previous timestamp if (currentTimestamp !== null) { for (const [ap, { macsSet, rssiSum, rssiCount }] of apMap) { const numMacs = macsSet.size; const avgRssi = rssiCount > 0 ? rssiSum / rssiCount : 0; resultArray.push({ ap: ap, numMacs: numMacs, avg: avgRssi, timestamp: currentTimestamp }); } } // Reset AP details for the new timestamp currentTimestamp = entry.timestamp; apMap.clear(); } const apDetails = apMap.get(entry.ap); if (apDetails) { // AP entry exists, update details const { macsSet, rssiSum, rssiCount } = apDetails; if (!macsSet.has(entry.mac)) { macsSet.add(entry.mac); } apDetails.rssiSum += entry.rssi; apDetails.rssiCount++; } else { // AP entry doesn't exist, create new details const macsSet = new Set(); macsSet.add(entry.mac); apMap.set(entry.ap, { macsSet, rssiSum: entry.rssi, rssiCount: 1 }); } } // Process the AP details for the last timestamp if (currentTimestamp !== null) { for (const [ap, { macsSet, rssiSum, rssiCount }] of apMap) { const numMacs = macsSet.size; const avgRssi = rssiCount > 0 ? rssiSum / rssiCount : 0; resultArray.push({ ap: ap, numMacs: numMacs, avg: avgRssi, timestamp: currentTimestamp }); } } return resultArray; }36:Tacf,scatterplot = (dataArray, alltimes, firstTs) => { const svg = d3.create("svg").attr("width", 1200).attr("height", 500); const xScale = d3 .scaleLinear() .domain([0, d3.max(dataArray, (d) => d.numMacs)]) .range([40, 1100]); const yScale = d3 .scaleLinear() .domain([d3.max(dataArray, (d) => d.avg), d3.min(dataArray, (d) => d.avg)]) .range([40, 450]); const xAxis = d3.axisBottom(xScale); svg.append("g").attr("transform", "translate(0, 450)").call(xAxis); const yAxis = d3.axisLeft(yScale); svg.append("g").attr("transform", "translate(40, 0)").call(yAxis); svg .append("rect") .attr("x", xScale(0)) .attr("y", yScale(-75)) .attr("width", xScale.range()[1] - xScale.range()[0]) .attr("height", yScale.range()[1] - yScale(-75)) .attr("fill", "red") .attr("opacity", "0.1"); svg .append("text") .attr("x", 600) .attr("y", 490) .attr("text-anchor", "middle") .style("font-size", "13px") .style("font-family", "sans-serif") .text("Number of devices"); svg .append("text") .attr("transform", "rotate(-90)") .attr("x", -200) .attr("y", 10) .attr("text-anchor", "middle") .style("font-size", "13px") .style("font-family", "sans-serif") .text("Mean RSSI"); let timestampIndex = firstTs; let currentTimestamp = alltimes[timestampIndex]; let currentData = []; const timeText = svg .append("text") .attr("class", "current-timestamp") .attr("x", 570) .attr("y", 20) .style("font-family", "sans-serif") .text(""); function updateData() { currentData = dataArray.filter((d) => d.timestamp === currentTimestamp); const dots = svg.selectAll(".dot").data(currentData, (d) => d.ap); dots .enter() .append("circle") .attr("class", "dot") .attr("r", 4) .style("fill", (d) => apSelection.includes(d.ap) ? apColorscale(d.ap) : "transparent" ) .attr("stroke", (d) => (apSelection.includes(d.ap) ? "black" : "#b3b3b3")) .merge(dots) // Merge the enter selection with the update selection .transition() // Apply the transition .duration(800) // Transition duration in milliseconds .attr("cx", (d) => xScale(d.numMacs)) .attr("cy", (d) => yScale(d.avg)) .on("end", function () { timeText.text(`${fmtTimestamp(currentTimestamp * 1000)}`); }); dots.exit().remove(); } function animate() { if (timestampIndex < alltimes.length) { updateData(); timestampIndex++; if (timestampIndex < alltimes.length) { currentTimestamp = alltimes[timestampIndex]; setTimeout(animate, 2000); // the delay between frames } } } animate(); return svg.node(); }37:T5a9,class BarTooltip { constructor() { this._fieldVal = htl.svg``; this._run = htl.svg``; this._auth = htl.svg``; this._ip = htl.svg``; this._webauth = htl.svg``; this._idle = htl.svg``; this.node = htl.svg` ${this._fieldVal} ${this._run} ${this._auth} ${this._ip} ${this._webauth} ${this._idle} `; } show(event, d) { this.node.removeAttribute("display"); this.node.setAttribute( "transform", `translate(${event.x}, ${event.layerY > 700 ? 700 : event.layerY})` ); this._fieldVal.textContent = `AP ${d.fieldVal}`; this._run.textContent = `run: ${d.st1}`; this._auth.textContent = `auth: ${d.st2}`; this._ip.textContent = `ip-learning: ${d.st3}`; this._webauth.textContent = `webauth: ${d.st4}`; this._idle.textContent = `idle: ${d.st5}`; d3.select(event.target).attr("stroke-width", "2").attr("stroke", "#fcba03"); } hide(event) { d3.select(event.target).attr("stroke-width", "0"); this.node.setAttribute("display", "none"); } }38:T4a4,// generates an array of objects with fields `fieldVal` and `count` // given a map of key-value pairs where each value must be an array, fieldVal will store the key. Count // will store a processed version of the specified field of all objects in the array associated with // that key. // op determines how you want to process the array's objects. Pass "unique" if you want the number of // unique values of the named field. Pass "avg" if you want the average value of the named field. Pass // "sum" if you want the summation of values of the named field. Pass "size" if you want count to store the // number of entries in each array function aggregatePerKey(map, field, op) { const result = []; let operation; if (op === "unique") { operation = countUnique; } else if (op === "avg") { operation = calculateAverage; } else if (op === "sum") { operation = calculateSum; } else if (op === "size") { operation = countSize; } else { operation = () => 0; // Default operation } map.forEach((value, key) => { const count = operation(value, field); result.push({ fieldVal: key, // device count: count }); }); return result; }39:Tc2f,generateCirclePack = ( fieldCounts, fieldLabel, countLabel, highlight, avgProfText ) => { const colorScale = d3 .scaleSequential() .domain([0, d3.max(fieldCounts, (d) => d.count)]) .interpolator(d3.interpolate("#b1dee0", "#389296")); const root = { children: fieldCounts }; const hierarchy = d3.hierarchy(root).sum((d) => d.count); const pack = d3.pack().size([930, 800]).padding(3); const packedData = pack(hierarchy); let width = 932; let height = 700; const svgHTML = html``; const svg = d3.select(svgHTML).style("width", "100%").style("height", "auto"); const leaf = svg .selectAll("g") .data(packedData.leaves()) .enter() .append("g") .attr("transform", (d) => `translate(${d.x + 1},${d.y + 1})`); let circle = leaf .append("circle") .attr("r", (d) => d.r) .attr("fill", (d) => d.data.fieldVal === highlight ? "#d9b100" : colorScale(d.data.count) ); leaf .append("text") .text((d) => (d.data.count > 1000 ? `${fieldLabel}${d.data.fieldVal}` : "")) .attr("x", 0) .attr("font-size", 14) .attr("font-family", "sans-serif") .attr("text-anchor", "middle"); let current_circle = undefined; let format = d3.format(",d"); function selectCircle(d) { // cleanup previous selected circle if (current_circle !== undefined) { current_circle.attr("fill", (d) => d.data.fieldVal === highlight ? "#d9b100" : colorScale(d.data.count) ); svg.selectAll("#details-popup").remove(); } // select the circle current_circle = d3.select(this); current_circle.attr("fill", "#b2e1f9"); // var textblock = svg // .selectAll("#details-popup") // .data([d]) // .enter() // .append("g") // .attr("id", "details-popup") // .attr("font-size", 14) // .attr("font-family", "sans-serif") // .attr("text-anchor", "start") // .attr("transform", (d) => `translate(0, 20)`); var textblock = svg .append("text") .attr("id", "details-popup") .attr("x", 10) .attr("y", 20) .attr("font-family", "sans-serif") .attr("text-anchor", "start") .attr("fill", "black") .attr("font-weight", "bold") .text("Details:"); textblock .append("tspan") .text(`${fieldLabel}${this.__data__.data.fieldVal}`) .attr("font-weight", "normal") .attr("x", 10) .attr("dy", "2em"); textblock .append("tspan") .text((d) => `${countLabel}${this.__data__.data.count}`) .attr("font-weight", "normal") .attr("x", 10) .attr("dy", "1em"); } circle.on("click", selectCircle); // circle // .transition() // .duration(100000) // Duration of the transition in milliseconds // .attr("r", (d) => d.r * (d.data.count / 10)); let avgProf = svg .append("text") .attr("font-size", 16) .attr("font-family", "sans-serif") .attr("text-anchor", "end"); avgProf.append("tspan").text(avgProfText).attr("y", "16").attr("x", "800"); return svg.node(); }3a:[{"id":"391c3254b7788c96601b77a9f4624039f51224537e9bc33ee6a38fc9a4ae16cd36819be6978ab1e2f821f11aed437d0e42c7c1724a833845b3e43a60a23eac34","href":"https://static.observableusercontent.com/files/391c3254b7788c96601b77a9f4624039f51224537e9bc33ee6a38fc9a4ae16cd36819be6978ab1e2f821f11aed437d0e42c7c1724a833845b3e43a60a23eac34","name":"collapsedJulyFull@1.csv","type":"text/csv","lastModified":1692035371548.208,"size":4710345}] 2f:{"title":"03: Visualizing Access Point Usage","cells":[{"id":0,"value":"# 03: Visualizing Access Point Usage","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"### How many devices are connected to the network overall, and how does this fluctuate throughout the day? \n\n### Is there a correlation between the number of devices using the network and indicators of signal quality, such as SNR and retry rate?","pinned":false,"hidden":false,"mode":"md"},{"id":5601,"value":"html`\n${fmtTimestamp(bigInterval[0])}\n${fmtTimestamp(bigInterval[1])}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5511,"value":"viewof bigInterval = interval([timeframe.fromTs, timeframe.toTs], {\n step: 3600000,\n value: [\n zoom[0] ? dataAllAPS[0].date.getTime() : 1688731837000,\n zoom[0] ? dataAllAPS[0].date.getTime() + 86400000 : 1688731837000 + 86400000\n ],\n format: (d) => \"\",\n label: \"Time window\",\n width: \"700px\",\n color: \"steelblue\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5947,"value":"> #### Mean SNR","pinned":false,"hidden":false,"mode":"md"},{"id":4529,"value":"Plot.plot({\n width,\n height: 200,\n grid: true,\n x: { label: \"Date\", type: \"time\" },\n y: { label: \"Mean SNR (dB)\", tickFormat: \"0\" },\n marks: [\n movingAvg[0]\n ? Plot.line(\n julySubset,\n Plot.windowY({\n x: \"date\",\n y: \"snr\",\n k: k * 60,\n stroke: \"orange\",\n tip: true,\n title: (d) =>\n `Date: ${fmtDate(d.date)}\\nMean SNR: ${d.snr.toFixed(1)}`\n })\n )\n : Plot.lineY(julySubset, {\n x: \"date\",\n y: \"snr\",\n tip: true,\n stroke: \"steelblue\",\n title: (d) =>\n `Date: ${fmtDate(d.date)}\\nMean SNR: ${d.snr.toFixed(1)}`\n })\n ],\n caption: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5953,"value":"> #### Mean RSSI","pinned":false,"hidden":false,"mode":"md"},{"id":2267,"value":"Plot.plot({\n width,\n height: 200,\n grid: true,\n x: { label: \"Date\", type: \"time\" },\n y: { label: \"Mean RSSI (dBm)\", tickFormat: \"0\" },\n marks: [\n movingAvg[0]\n ? Plot.line(\n julySubset,\n Plot.windowY({\n x: \"date\",\n y: \"rssi\",\n k: k * 60,\n stroke: \"orange\",\n tip: true,\n title: (d) =>\n `Date: ${fmtDate(d.date)}\\nMean RSSI: ${d.rssi.toFixed(1)}`\n })\n )\n : Plot.lineY(julySubset, {\n x: \"date\",\n y: \"rssi\",\n tip: true,\n stroke: \"steelblue\",\n title: (d) =>\n `Date: ${fmtDate(d.date)}\\nMean RSSI: ${d.rssi.toFixed(1)}`\n })\n ],\n caption: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5934,"value":"> #### Mean retry rate (resent packets / total packets sent)","pinned":false,"hidden":false,"mode":"md"},{"id":4532,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":5944,"value":"> #### Most common speeds","pinned":false,"hidden":false,"mode":"md"},{"id":5154,"value":"addTooltips(\n Plot.plot({\n color: { legend: false },\n width,\n height: 200,\n grid: true,\n x: { label: \"time\", type: \"time\" },\n y: { label: \"proportion of devices (%)\", percent: true },\n marks: [\n Plot.ruleY([0], { stroke: \"transparent\" }),\n movingAvg[0]\n ? Plot.line(\n dataForSpds,\n Plot.windowY({\n x: \"date\",\n y: \"numMacs\",\n z: \"sp\",\n k: k * 60,\n stroke: \"sp\",\n title: (d) => `${d.sp}`\n })\n )\n : Plot.lineY(dataForSpds, {\n x: \"date\",\n y: \"numMacs\",\n z: \"sp\",\n stroke: \"sp\",\n title: (d) => `${d.sp}`\n })\n ],\n caption: \"\"\n }),\n { stroke: \"black\", \"stroke-width\": 4 }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5957,"value":"> #### Total number of client devices connected","pinned":false,"hidden":false,"mode":"md"},{"id":2293,"value":"Plot.plot({\n grid: true,\n width,\n height: 200,\n x: { label: \"Date\", type: \"time\" },\n y: { label: \"Number of devices\" },\n marks: [\n movingAvg[0]\n ? Plot.line(\n julySubset,\n Plot.windowY({\n x: \"date\",\n y: \"macs\",\n k: k * 60,\n stroke: \"orange\",\n tip: true,\n title: (d) =>\n `Date: ${fmtDate(d.date)}\\nNumber of devices: ${d.macs}`\n })\n )\n : Plot.lineY(julySubset, {\n x: \"date\",\n y: \"macs\",\n tip: true,\n stroke: \"steelblue\",\n title: (d) => `Date: ${fmtDate(d.date)}\\nNumber of devices: ${d.macs}`\n })\n ],\n caption: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5962,"value":"> #### Number of APs with active connections","pinned":false,"hidden":false,"mode":"md"},{"id":5904,"value":"Plot.plot({\n grid: true,\n width,\n height: 200,\n x: { label: \"Date\", type: \"time\" },\n y: { label: \"Number of APs\" },\n marks: [\n movingAvg[0]\n ? Plot.line(\n julySubset,\n Plot.windowY({\n x: \"date\",\n y: \"aps\",\n k: k * 60,\n stroke: \"orange\",\n tip: true,\n title: (d) => `Date: ${fmtDate(d.date)}\\nNumber of APs: ${d.aps}`\n })\n )\n : Plot.lineY(julySubset, {\n x: \"date\",\n y: \"aps\",\n tip: true,\n stroke: \"steelblue\",\n title: (d) => `Date: ${fmtDate(d.date)}\\nNumber of APs: ${d.aps}`\n })\n ],\n caption: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3911,"value":"viewof movingAvg = Inputs.checkbox([true], {\n label: \"Show moving average\",\n value: [false]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6012,"value":"viewof k = Inputs.range([0.5, 12], {\n value: 1,\n step: 0.5,\n label: \"k =\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4507,"value":"Let's take a closer look at the data for a 24-hour time frame. Specifically, we'll be using the data for July 31. We could load in a couple of other days' datasets as well, but the idea is the same.","pinned":false,"hidden":false,"mode":"md"},{"id":2590,"value":"viewof zoom = Inputs.checkbox([true], {\n label: \"Zoom into July 31\",\n value: [false]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4518,"value":"If we select the checkbox, the line chart above now shows the number of devices connected to the wifi over the course of July 31. (For the rest of this notebook, the visualizations will rely on uncollapsed data for July 31).","pinned":false,"hidden":false,"mode":"md"},{"id":398,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":2499,"value":"viewof showAllAPS = Inputs.checkbox([true], {\n label: \"show all APS\",\n value: [true]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2502,"value":"addTooltips(\n Plot.plot({\n color: {\n legend: false,\n scheme: \"Rainbow\"\n },\n width,\n height: 300,\n grid: true,\n x: { label: \"time\", type: \"time\" },\n y: { label: \"number of devices\" },\n marks: [\n Plot.ruleY([0], { stroke: \"transparent\" }),\n Plot.ruleY([maxNumMacs], { stroke: \"transparent\" }),\n Plot.lineY(showAllAPS[0] ? dataAllAPS : dataAllAPSFiltered, {\n x: \"date\",\n y: \"numMacs\",\n z: \"ap\",\n stroke: showAllAPS[0] ? \"ap\" : \"steelblue\",\n title: (d) => `AP ${d.ap}` // ${d.numMacs} devices connected\n })\n ],\n caption: \"\"\n }),\n { stroke: \"black\", \"stroke-width\": 4 }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2474,"value":"viewof pickedAP = Inputs.select(allTheAPS, {\n label: \"Select an AP:\",\n value: 55\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2478,"value":"#### (Magnified view) Number of devices and users connected to access point **${pickedAP}**:","pinned":false,"hidden":false,"mode":"md"},{"id":4646,"value":"Swatches(d3.scaleOrdinal([\"# devices\", \"# users\"], [\"steelblue\", \"#b1dafc\"]), {\n columns: \"80px\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2481,"value":"Plot.plot({\n width,\n height: 260,\n grid: true,\n x: { label: \"time\", type: \"time\" },\n y: { label: \"count\" },\n marks: [\n Plot.ruleY([0]),\n Plot.lineY(dataAllAPSFiltered, {\n x: \"date\",\n y: (d) =>\n d.numMacs === undefined || d.numMacs === null || d.numMacs === NaN\n ? NaN\n : d.numMacs,\n stroke: \"steelblue\"\n }),\n Plot.lineY(dataAllAPSFiltered, {\n x: \"date\",\n y: \"numUsers\",\n stroke: \"#b1dafc\"\n })\n ],\n caption: `Number of devices, users connected to AP ${pickedAP}`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"The line charts allow us to easily spot the peak usage times during the day. It also shows that this is not a peak for all APs - for some (e.g., AP 57), the number of devices connected hardly fluctuates over the course of the day, whereas for others such as AP 38 there is a noticeable jump. \n\nHowever, the many overlapping lines in the line chart can make it a little difficult to inspect less conspicuous lines or miss certain details. If we want to immediately identify all the APs that are in use at a given point in time, and among those, which are the most heavily utilized and least utilized, one approach could be to use a treemap.","pinned":false,"hidden":false,"mode":"md"},{"id":4139,"value":"#### Hover over a box to see how many devices are connected to an AP. \n#### Adjust the slider (for example, try July 12, 3:30 PM, which is during the peak usage period for AP 28 according to the line charts above). ","pinned":false,"hidden":false,"mode":"md"},{"id":2903,"value":"viewof currDate = Scrubber(dates, {\n autoplay: false,\n format: (d) =>\n d.toLocaleString(\"en\", {\n month: \"long\",\n day: \"numeric\",\n hour: \"numeric\",\n minute: \"numeric\"\n }),\n delay: 500\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"treemap = generateTreemap(APcounts)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4148,"value":"Note: Times for which no data is available is skipped. For example, if you place the slider at around July 12, 8:00 am and press Play, you'll notice that it jumps after 8:09 to 8:57.","pinned":false,"hidden":false,"mode":"md"},{"id":38,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":4168,"value":"### The treemap, however, is less conducive to observing changes over time. Can we get a more bird's eye view of how much the various APs are being used, both in comparison with other APs and with itself over time?\n\nNumber of devices connected to each AP between","pinned":false,"hidden":false,"mode":"md"},{"id":5548,"value":"html`\n${fmtTimestamp(fromTime)}\n${fmtTimestamp(toTime)}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5481,"value":"viewof subInterval = interval([innerTimeframe.from, innerTimeframe.to], {\n step: 3600000,\n value: [innerTimeframe.from, innerTimeframe.to],\n format: (d) => \"\",\n label: \"Time window\",\n width: \"700px\",\n color: \"steelblue\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"Plot.plot({\n width,\n height: 2000,\n padding: 0,\n fy: { grid: true, label: \"Access point\" },\n x: {\n label: \"Time\"\n },\n color: {\n scheme: \"BuGn\",\n legend: true,\n range: [0.2, 1.2],\n label: \"Number of devices\"\n },\n marks: [\n Plot.rect(\n APSubset,\n Plot.binX(\n { fill: \"distinct\" },\n { x: \"date\", fy: \"ap\", fill: \"mac\", inset: 0.2, tip: true }\n )\n )\n // Plot.tip(\n // APSubset,\n // Plot.pointer({\n // x: \"date\",\n // fy: \"ap\",\n // title: (d) => `AP ${d.ap}`\n // })\n // )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4664,"value":"A minor drawback is that with so many APs, it's not always easy to view the entire diagram on the screen. Still, compared to the line charts and treemap, it does a good job of clearly displaying multiple details, facilitating comparisons both horizontally and vertically. One minor inconvenience currently is that the dates are in UCT not local ECT, but that can definitely be fixed.","pinned":false,"hidden":false,"mode":"md"},{"id":1917,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":405,"value":"### Now that we have seen the distribution of devices across APs, we can also return to the traffic metrics and try to correlate the two. For example, for APs with a lot of devices connected, how is their clients' signal strength? \n\nA correlation between number of connected devices and signal strength might seem expected, but not necessarily -- RSSI can be influenced by many other factors. It's possible there is no significant correlation, or perhaps the number of devices is simply not large enough, even during the peak usage times of the day, to make any noticeable impact on the network. After all, \n> the highest number of devices connected to the network, at any point in time between July 1 - 19, was **${maxNumMacsOverall}**. But we also have a lot of APs, giving a device-to-AP ratio of just **${(maxNumMacsOverall / allTheAPS.length).toFixed(1)} : 1**. And the highest number of devices that were connected to the same AP simultaneously was **${maxNumMacs}**.","pinned":false,"hidden":false,"mode":"md"},{"id":1923,"value":"Plot.plot({\n inset: 8,\n width: 1000,\n height: 500,\n y: { label: \"Mean RSSI\" },\n x: { label: \"Number of devices\" },\n grid: true,\n marks: [\n Plot.ruleY([-20], { stroke: \"transparent\" }),\n Plot.areaY([{ numMacs: 0 }, { numMacs: maxNumMacs }], {\n x: \"numMacs\",\n y1: -95,\n y2: -75,\n fill: \"#c41000\",\n fillOpacity: 0.1\n }),\n Plot.ruleY([-95], { stroke: \"transparent\" }),\n Plot.ruleX([0], { stroke: \"transparent\" }),\n Plot.ruleX([maxNumMacs], { stroke: \"transparent\" }),\n Plot.dot(plotdata, {\n x: \"numMacs\",\n y: \"avg\",\n tip: true,\n fill: \"ap\",\n r: 5,\n stroke: \"black\"\n }),\n Plot.text([`RSSI ≤ -75 dBm could\\nindicate weak signal strength`], {\n x: 70,\n y: -87,\n anchor: \"left\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1954,"value":"viewof ts = Scrubber(dates, {\n autoplay: false,\n format: (d) =>\n d.toLocaleString(\"en\", {\n month: \"long\",\n day: \"numeric\",\n hour: \"numeric\",\n minute: \"numeric\"\n }),\n delay: 200\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6062,"value":"If we drag the slider to July 12, 3:30 PM, it looks like the average device connected to AP 38 (the dot far off to the right) actually has fine signal strength (around -54).","pinned":false,"hidden":false,"mode":"md"},{"id":2198,"value":"#### We can also animate this with transitions so that it is easier to follow the evolution of APs over time. We will also select a couple of interesting APs to follow, otherwise it would be too crowded.","pinned":false,"hidden":false,"mode":"md"},{"id":2115,"value":"viewof apSelection = Inputs.select(getAPs(dd), {\n value: [13, 9, 18, 21, 28],\n label: \"Select multiple APs to highlight:\",\n multiple: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2160,"value":"Swatches(apColorscale, {\n columns: \"50px\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2004,"value":"scatterplot(dd, alltimes, findIdxOrNearest(alltimes, ts.getTime() / 1000))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1909,"value":"---\n### Finally, there is another metric related to AP-device connections: `State` records the phase of the association that the client was able to complete successfully.","pinned":false,"hidden":false,"mode":"md"},{"id":4984,"value":"Usually, a client is authenticated within a minute or so and transitions quickly to the `client-status-run` state, which is what we'd like to see. However, there are some access points for which this does not seem to be the case, such as AP 60.","pinned":false,"hidden":false,"mode":"md"},{"id":5854,"value":"#### In the bar chart below, each AP is represented by a layered vertical bar, and the height of each layer shows how much of total connection time (across all devices) the AP spent in a certain state. Technically, it's the number of records we have in the data for that AP for each state. The data is over a 24 hour period. Feel free to rearrange the x-axis (APs):","pinned":false,"hidden":false,"mode":"md"},{"id":1475,"value":"viewof order = {\n const select = Inputs.select(\n new Map([\n [\"Sort by AP\", (a, b) => a.fieldVal - b.fieldVal],\n [\n \"Sort by total number of records\",\n (a, b) => totalPerAP.get(b.fieldVal) - totalPerAP.get(a.fieldVal)\n ]\n ]),\n { label: \"Order\" }\n );\n\n return select;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4110,"value":"Swatches(\n d3.scaleOrdinal(\n [\"running\", \"authenticating\", \"ip-learning\", \"webauth-required\", \"idle\"],\n d3.schemeTableau10\n ),\n {\n columns: \"100px\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1600,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":4894,"value":"---\n## Data Processing:","pinned":false,"hidden":false,"mode":"md"},{"id":2340,"value":"julyRaw = await FileAttachment(\"collapsedJulyFull@1.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2549,"value":"julySubset = timestampsToDates(\n julyRaw.filter((d) => {\n const ts = +d.timestamp * 1000;\n return ts >= bigInterval[0] && ts <= bigInterval[1];\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5234,"value":"dataForSpds = getTopSpdsData(julySubset, 4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2560,"value":"timeframe = getTimeLimits(julyRaw)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4548,"value":"function getRetryRate(totalPkts, retries) {\n return totalPkts === 0 ? 0 : retries / totalPkts;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2465,"value":"allTheAPS = Array.from(APmap.keys())","pinned":false,"hidden":false,"mode":"ojs"},{"id":2492,"value":"dataAllAPS = {\n const data = [];\n allTheAPS.map((a) => {\n const apData = timestampsToDates(APmap.get(a));\n apData.map(({ numMacs, numUsers, date }) =>\n data.push({ numMacs, numUsers, date, ap: a })\n );\n });\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3942,"value":"maxNumMacs = d3.max(dataAllAPS, (d) => d.numMacs)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2495,"value":"dataAllAPSFiltered = dataAllAPS.filter((e) => +e.ap === +pickedAP)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2651,"value":"APcountsMap = countFieldFreqs(\n apDataDay.filter((d) => +d.timestamp * 1000 === currDate.getTime()),\n \"ap\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2659,"value":"APcounts = mapToArr(APcountsMap)","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2968,"value":"class Tooltip {\n constructor() {\n this._fieldVal = htl.svg``;\n this._count = htl.svg``;\n this.node = htl.svg`\n \n ${this._fieldVal}\n ${this._count}\n`;\n }\n\n show(event, d) {\n this.node.removeAttribute(\"display\");\n this.node.setAttribute(\n \"transform\",\n `translate(${(d.x0 + d.x1) / 2}, ${d.y0 + 60})`\n );\n this._fieldVal.textContent = `AP ${d.data.fieldVal}`;\n this._count.textContent = `${d.data.count} devices connected`;\n\n d3.select(event.target).attr(\"stroke-width\", \"2\").attr(\"stroke\", \"black\");\n }\n\n hide(event) {\n d3.select(event.target).attr(\"stroke-width\", \"0\");\n this.node.setAttribute(\"display\", \"none\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5094,"value":"function getUniqueDates(dataset) {\n const times = [...new Set(dataset.map((obj) => obj.timestamp))];\n times.sort();\n return times.map((timestamp) => new Date(timestamp * 1000));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2846,"value":"// sorted array of all the times for which we have data. Times converted into Date objects\ndates = getUniqueDates(apDataDay)","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"APSubset = timestampsToDates(\n apDataDay.filter((d) => {\n const ts = d.timestamp * 1000;\n return ts >= fromTime && ts <= toTime;\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2624,"value":"innerTimeframe = ({\n from: apDataDay[0].timestamp * 1000,\n to: apDataDay[apDataDay.length - 1].timestamp * 1000\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4699,"value":"maxNumMacsOverall = d3.max(julyRaw, (d) => d.macs)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1941,"value":"function collapseByTs(entries, timestamp) {\n const result = [];\n const apMap = new Map();\n\n for (const entry of entries) {\n if (entry.timestamp === timestamp) {\n const { ap, mac, rssi } = entry;\n\n if (apMap.has(ap)) {\n const apData = apMap.get(ap);\n if (!apData.macSet.has(mac)) {\n apData.macSet.add(mac);\n apData.totalRssi += rssi;\n apData.count++;\n }\n } else {\n const apData = {\n ap,\n macSet: new Set([mac]),\n totalRssi: rssi,\n count: 1\n };\n apMap.set(ap, apData);\n }\n }\n }\n\n apMap.forEach(({ ap, macSet, totalRssi, count }) => {\n const avgRssi = totalRssi / count;\n result.push({ ap, numMacs: macSet.size, avg: avgRssi });\n });\n\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1932,"value":"sorted = sortByField(apDataDay, \"timestamp\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2193,"value":"plotdata = collapseByTs(sorted, ts / 1000)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1982,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1985,"value":"dd = collapser(sorted)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1991,"value":"alltimes = getUniqueTimes(dd)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5147,"value":"function getUniqueTimes(dd) {\n const uniqueTimestamps = [...new Set(dd.map((obj) => obj.timestamp))];\n\n // Sort timestamps in ascending order\n uniqueTimestamps.sort();\n\n return uniqueTimestamps;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5003,"value":"function findIdxOrNearest(arr, element) {\n let left = 0;\n let right = arr.length - 1;\n let index = -1;\n\n while (left <= right) {\n const mid = Math.floor((left + right) / 2);\n\n if (arr[mid] === element) {\n index = mid;\n break;\n } else if (arr[mid] < element) {\n index = mid; // Store the current index as the potential smaller element\n left = mid + 1;\n } else {\n right = mid - 1;\n }\n }\n\n return index;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2000,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":2118,"value":"apColorscale = d3\n .scaleOrdinal()\n // .domain(dd.map((d) => d.ap))\n .domain(apSelection)\n .range(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2092,"value":"function getAPs(data) {\n const unique = [...new Set(data.map((o) => o.ap))];\n return unique;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1253,"value":"stateMap = {\n const results = new Map();\n for (const state of [1, 2, 3, 4, 5]) {\n results.set(state, aggregatePerKey(APmap, `st${state}`, \"sum\"));\n }\n\n return results;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1249,"value":"stateCounts = {\n const results = [];\n\n for (const st of [1, 2, 3, 4, 5]) {\n results.push(...appendField(stateMap.get(st), \"state\", st));\n }\n\n return results;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1296,"value":"// key is ap, value is the total count over all five states for that ap\ntotalPerAP = {\n const result = new Map();\n\n for (const ap of allTheAPS) {\n const thisAP = stateCounts.filter((o) => o.fieldVal === ap);\n let total = 0;\n for (const entry of thisAP) {\n total += entry.count;\n }\n result.set(ap, total);\n }\n\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1348,"value":"stateProportions = stateCounts.map((o) => {\n return {\n ...o,\n proportion: o.count / totalPerAP.get(o.fieldVal)\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1586,"value":"function collapseByAP(arr, field) {\n const collapsed = [];\n\n // Iterate through the original array\n for (const obj of arr) {\n const collapsedField = obj[field];\n const { fieldVal, state } = obj;\n\n // Check if an object with the current fieldVal exists in the new array\n const existingObj = collapsed.find(\n (newObj) => newObj.fieldVal === fieldVal\n );\n\n if (existingObj) {\n // Update the existing object with the count value based on the state\n existingObj[`st${state}`] = collapsedField;\n } else {\n // Create a new object with the fieldVal and count values based on the state\n const newObj = {\n fieldVal,\n [`st${state}`]: collapsedField\n };\n collapsed.push(newObj);\n }\n }\n\n return collapsed;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1596,"value":"collapsedStateCounts = collapseByAP(stateCounts, \"count\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":4015,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1894,"value":"colorScale = d3.scaleOrdinal(\n [\"st1\", \"st2\", \"st3\", \"st4\", \"st5\"],\n d3.schemeTableau10\n)\n\n// \"client-status-run\": 1\n// \"client-status-authenticating\": 2\n// \"client-status-ip-learning\": 3\n// \"client-status-webauth-required\": 4\n// \"client-status-idle\": 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":1472,"value":"update = animatedBarchart1.update(order)","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"fromTime = subInterval[0]\n// Range([innerTimeframe.from, innerTimeframe.to], {\n// step: 60000,\n// value: innerTimeframe.from,\n// format: (x) => fmtTimestamp(x),\n// label: \"Display from: \"\n// })","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"toTime = subInterval[1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1044,"value":"---\n### Functions","pinned":false,"hidden":false,"mode":"md"},{"id":5232,"value":"function getTopSpdsData(dataset, numSpFields) {\n const spFields = Object.keys(dataset[0]).slice(-numSpFields);\n\n return dataset.flatMap((o) => {\n const date = o.date;\n\n return spFields.map((sp) => ({\n date,\n numMacs: o[sp] / o.macs,\n sp\n }));\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"function countUnique(arr, field) {\n const unique = new Set();\n arr.forEach((o) => {\n unique.add(o[field]);\n });\n return unique.size;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1058,"value":"function countSize(arr, field) {\n return arr.length;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":497,"value":"function calculateAverage(arr, field) {\n let sum = 0;\n let counter = 0;\n arr.forEach((o) => {\n sum += o[field];\n counter++;\n });\n return counter > 0 ? sum / counter : 0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"function calculateSum(arr, field) {\n let sum = 0;\n arr.forEach((o) => {\n sum += o[field];\n });\n return sum;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1171,"value":"aggregateMultipleFields = (map, fields, op) => {\n const result = [];\n let operation;\n\n if (op === \"unique\") {\n operation = countUnique;\n } else if (op === \"avg\") {\n operation = calculateAverage;\n } else if (op === \"sum\") {\n operation = calculateSum;\n } else if (op === \"size\") {\n operation = countSize;\n } else {\n operation = () => 0; // Default operation\n }\n\n map.forEach((value, key) => {\n const counts = {};\n\n fields.forEach((field) => {\n counts[field] = operation(value, field);\n });\n\n const resultObj = {\n fieldVal: key,\n count: counts[fields[0]] // Assuming at least one field is given\n };\n\n fields.slice(1).forEach((field, index) => {\n resultObj[field] = counts[field];\n });\n\n result.push(resultObj);\n });\n\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1213,"value":"`aggregateMultipleFields` is the same as aggregatePerKey, except that it takes an array of fields, performing the operation on all the specified fields. In the resulting array, fields after the first field (only that is still named count) will be named by their original name.\n> `aggregateMultipleFields(collapsedbyUserMac, [\"minsElapsed\"], \"avg\")`\n\nis the same as \n> `aggregatePerKey(collapsedbyUserMac, \"minsElapsed\", \"avg\")`.","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"---\n### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":1241,"value":"import { appendField } from \"c0dcb74d753a1252\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2462,"value":"import { APmap } from \"@joannef/ciscowifi-03-collapse-aps\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2851,"value":"import { addTooltips } from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2275,"value":"import { timestampsToDates } from \"14fd093abbdf9097\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2653,"value":"import { apdata as apDataDay } from \"@joannef/ciscowifi-03-collapse-aps\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2661,"value":"import { countFieldFreqs } from \"14fd093abbdf9097\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2664,"value":"import { mapToArr } from \"14fd093abbdf9097\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2898,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1934,"value":"import { sortByField } from \"@joannef/ciscowifi-03-collapse-aps\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1956,"value":"import { fmtTimestamp } from \"c93ab94be19bf37d\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5394,"value":"import { fmtDate } from \"1d66108c8c2cc03f\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1961,"value":"import { getTimeLimits } from \"c93ab94be19bf37d\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1968,"value":"import { Range } from \"@esperanc/range-input-variations\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1897,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5473,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5483,"value":"import { interval } from \"@mootari/range-slider\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"Over weeks and months, this notebook's horizontal scrollbar might be helpful to [smooth the data using a rolling average](https://observablehq.com/@observablehq/discovering-date-patterns), otherwise our current minute-by-minute data is too squished","pinned":false,"hidden":false,"mode":"md"},{"id":413,"value":"import { collapsedbyUserMac } from \"@joannef/ciscowifi-03-collapse-aps\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"import { timeLimits } from \"@joannef/ciscowifi-03-collapse-aps\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"#### CREDITS","pinned":false,"hidden":false,"mode":"md"},{"id":175,"value":"treemap inspiration [here](https://observablehq.com/@d3/treemap-stratify) and [here](https://observablehq.com/@thetylerwolf/day-10-treemap?collection=@thetylerwolf/25-days-of-d3)\n\n[treemap tooltip reference](https://observablehq.com/@d3/learn-d3-interaction)","pinned":false,"hidden":false,"mode":"md"},{"id":3886,"value":"#### Unused","pinned":false,"hidden":false,"mode":"md"},{"id":277,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":5340,"value":"### STYLE","pinned":false,"hidden":false,"mode":"md"},{"id":5305,"value":"\n\n\n \n\n","pinned":false,"hidden":false,"mode":"html"}],"files":"$W3a","stdlib":"1","titling":"auto"}