2f:T590,### [Official Definitions]("https://github.com/YangModels/yang/blob/main/vendor/cisco/xe/1791/Cisco-IOS-XE-wireless-client-oper.yang") ### bytes_rx uint64; "The number of bytes of wireless data traffic received from the Mobile station on a particular Wireless LAN." ### bytes_tx uint64; "The number of bytes of wireless data traffic transmitted to the Mobile station on a particular Wireless LAN." ### data_retries uint64; "The number of retries a wireless mobile station has executed for the wireless data traffic on a particular Wireless LAN." ### most-recent-rssi int8; "RSSI is the relative received signal strength in a wireless environment, is an indication of the power level being received by the receive radio after the antenna and possible cable loss. Last updated Radio Signal Strength indicator is recorded."; ### most-recent-snr uint8; "Signal-to-noise ratio (abbreviated SNR or S/N) is a measure used in science and engineering that compares the level of a desired signal to the level of background noise. Last updated Signal To Noise Ratio is recorded." ### pkts_rx uint64; "The number of packets of wireless data traffic received from the Mobile station on a particular Wireless LAN." ### pkts_tx uint64; "The number of packets of wireless data traffic transmitted to the Mobile station on a particular Wireless LAN." ### speed uint32; "Latest speed of the connected client." 30:T5a3,// function minsVsTime(data, fieldName) { // data = data.filter(Boolean); // // sort data based on the 'fieldName' field value in ascending order // data.sort((a, b) => a[fieldName] - b[fieldName]); // const newData = []; // const initDate = new Date(data[0].timestamp * 1000); // * 1000 to convert from seconds to milliseconds // data.forEach((o) => { // const date = new Date(o.timestamp * 1000); // const minutes = (date - initDate) / 60000; // if (!newData[minutes]) { // newData[minutes] = { date: date, min: o[fieldName] }; // value represents avg // } // }); // filter out any empty (falsy) elements // return newData.filter(Boolean); // } function minsVsTime(data, fieldName) { if (data.length === 0) { return null; } const mins = []; let prevTime = new Date(); let minObj = null; for (const obj of data) { const currTime = obj.date; const fieldVal = obj[fieldName]; // If the current timestamp changes, push the current minimum object into the mins array if (currTime.getTime() !== prevTime.getTime()) { if (minObj) { mins.push(minObj); } prevTime = currTime; minObj = obj; } else { // update the current minimum object if necessary if (fieldVal < minObj[fieldName]) { minObj = obj; } } } // Push the last minimum object if (minObj) { mins.push(minObj); } return mins; }31:T579,Plot.plot({ width, marginTop: 35, x: { label: "date" }, y: { grid: true, tickFormat: "+f", label: "rssi (dBm)", domain: [-90, -20] }, color: { // type: "threshold", // domain: [-67, -50, -20], scheme: "RdYlGn", domain: [0, 200], range: [0.2, 1], legend: true, // TODO: legend range needs to be fixed: 0 ... 350+ label: "count" }, marks: [ // thresholds for RSSI // Plot.ruleY([-50], {strokeWidth: 3, stroke: "green", strokeOpacity: 0.6}), // Plot.ruleY([-67], {strokeWidth: 3, stroke: "#f5e320", strokeOpacity: 0.8}), // Plot.areaY(timeBounds, {x: "date", y1: -50, y2: -20, fill: "green", fillOpacity: 0.1}), // Plot.areaY(timeBounds, {x: "date", y1: -67, y2: -50, fill: "#f5e320", fillOpacity: 0.1}), // Plot.areaY(timeBounds, { // x: "date", // y1: -90, // y2: -70, // fill: "#c41000", // fillOpacity: 0.1 // }), Plot.rectY( metricsRefined, Plot.bin( { fill: "count" }, { x: "date", y: "rssi", r: 5, fill: "count", tip: true, inset: 0.1 } ) ), Plot.lineY(rssi, { x: "date", y: "value", strokeWidth: 2 }), genMinLine(showMins), genMaxLine(showMaxs) // labels for the lines - genText doesn't work // genText(rssiMin, "rssiMax", "max RSSI") ], caption: "RSSI over a 24 hour period, plus average RSSI every minute" })32:T401,Plot.plot({ width, marginTop: 35, x: { label: "date" }, y: { grid: true, tickFormat: "f", label: "snr", domain: [0, 70], }, color: { type: "diverging", pivot: 40, // type: "threshold", // domain: [-67, -50, -20], scheme: "RdYlGn", legend: true }, marks: [ // Plot.lineY(snrMin, {x: "date", y: "snr", strokeWidth: 1}), // Plot.lineY(snrMax, {x: "date", y: "snr", strokeWidth: 1}), Plot.dot(metricsRefined, Plot.hexbin({r: "count"}, {x: "date", y: "snr", binWidth, stroke: "snr"})), Plot.lineY(snr, {x: "date", y: "value", strokeWidth: 2, stroke: "black" }), // thresholds for SNR Plot.areaY(timeBounds, {x: "date", y1: 40, y2: 70, fill: "green", fillOpacity: 0.1}), Plot.areaY(timeBounds, {x: "date", y1: 25, y2: 40, fill: "#f5e320", fillOpacity: 0.1}), Plot.areaY(timeBounds, {x: "date", y1: 15, y2: 25, fill: "orange", fillOpacity: 0.2}), Plot.areaY(timeBounds, {x: "date", y1: 0, y2: 15, fill: "#c41000", fillOpacity: 0.1}) ] }) 33:T413,function mapToArr(map) { // Array.from(arrayLike, mapFn, thisArg) // where arrayLike is an iterable or array-like object to convert to an array, and // mapFn is a function to call on every element of the array. If provided (optional), every value of the array is // passed through this function, and mapFn's return value is put into the array instead. return Array.from(map, ([speed, count]) => ({ fieldVal: speed, count: count })); // [speed, count] extracts the first element of a two-element array and assign it to a speed variable, // and extracts the second element and assigns it to a count variable. // Then, { speed, count } creates an object literal where the speed and count variables' names are used for // property names, and the property values are the values of those variables // To see the difference, uncomment this: // return Array.from(speedCounts); // creates an array of two-element arrays } // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from34:[{"id":"38d67baa69c44bf2a96afb3d58401dcd5982b193fbc6cd699fca99a04492aa9da75b4285501ff4cbd2100f59841585f091e26bd6e1bb63467689009631848f42","href":"https://static.observableusercontent.com/files/38d67baa69c44bf2a96afb3d58401dcd5982b193fbc6cd699fca99a04492aa9da75b4285501ff4cbd2100f59841585f091e26bd6e1bb63467689009631848f42","name":"week.csv","type":"text/csv","lastModified":1686938215798.102,"size":44965249},{"id":"cc4158b5657151d7bed6e11b5e19425ce04ec2176b8a83c395b53f6df2c49c7acfa8b58c63f2cadeaa9cb92b4aac29483e898d0bac6b45bd2b0df7d116a949cf","href":"https://static.observableusercontent.com/files/cc4158b5657151d7bed6e11b5e19425ce04ec2176b8a83c395b53f6df2c49c7acfa8b58c63f2cadeaa9cb92b4aac29483e898d0bac6b45bd2b0df7d116a949cf","name":"details.csv","type":"text/csv","lastModified":1685122365135.282,"size":5676852}] 2d:{"title":"Exploration 00: Metrics Notes","cells":[{"id":0,"value":"# Exploration 00: Metrics Notes","pinned":false,"hidden":false,"mode":"md"},{"id":2366,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":2370,"value":"Source for the above definitions","pinned":false,"hidden":false,"mode":"html"},{"id":6,"value":"#### First, we'll get the raw Metrics dataset.","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"rawMetrics = await FileAttachment(\"details.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2219,"value":"By default, CSV doesn’t encode any type information, so values of properties are strings. But if we set file.csv’s `typed` option to `true`, these strings are converted into numbers.","pinned":false,"hidden":false,"mode":"md"},{"id":156,"value":"#### Let's refine the dataset so that ~~field values are numbers instead of strings, and~~ timestamps are replaced with Date objects:","pinned":false,"hidden":false,"mode":"md"},{"id":150,"value":"metricsRefined = timestampsToDates(rawMetrics)","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"#### Currently in our metrics dataset, there's a lot of data points for any single date (within the same minute). To graph fields like bytes transmitted or bytes received, we could sum up that field's values for all objects with the same date using the function [`aggregateByMin`](https://observablehq.com/d/14fd093abbdf9097?collection=@joannef/ciscowifi-analysis#aggregateByMin)","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"bytesTx = aggregateByMin(metricsRefined, \"bytes_tx\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"bytesRx = aggregateByMin(metricsRefined, \"bytes_rx\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"#### Below we concatenate the two arrays (but we could also do it in the plot code). \nThe way bytes_tx objects get distinguished from bytes_rx objects is by their `field` column. One example of this being useful is in the graph below where only one lineY mark is needed and the data points belong to one of the two lines through `stroke: \"field\"`. This was the only way I could figure out how to make the categorical color legend work - `color: {legend: true}`","pinned":false,"hidden":false,"mode":"md"},{"id":79,"value":"bytesTxRx = bytesTx.concat(bytesRx);","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"Plot.plot({\n color: {legend: true},\n width,\n grid: true,\n x: { label: \"date\" },\n y: { label: \"total bytes\", tickFormat: \".1s\" },\n marks: [\n Plot.ruleY([0]),\n Plot.lineY(bytesTxRx, {x: \"date\", y: \"value\", stroke: \"field\", tip: true}),\n ],\n caption: \"Total bytes received / transmitted across all client devices, against time\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"#### For `retries` (i.e., data retries) we could likewise sum up the total number of data retries for all users at a given time.","pinned":false,"hidden":false,"mode":"md"},{"id":459,"value":"retries = aggregateByMin(metricsRefined, \"retries\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":444,"value":"#### And graph the sum data retries against time:\n\nHover over the line for exact times and total number of retries","pinned":false,"hidden":false,"mode":"md"},{"id":449,"value":"Plot.plot({\n marginTop: 25,\n width,\n grid: true,\n x: { label: \"date\" },\n y: { label: \"total number of retries\", tickFormat: \".1s\" },\n marks: [\n Plot.ruleY([0]),\n Plot.lineY(retries, {x: \"date\", y: \"value\", stroke: \"steelblue\", tip: \"x\"}),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"#### For other fields, but also for the above fields as another way of condensing data, it might be more appropriate to graph the _average_ client value at a given time.","pinned":false,"hidden":false,"mode":"md"},{"id":405,"value":"#### The following arrays have objects containing the _mean_ client RSSI / SNR at any given time. The function used is [`avgByMin`](https://observablehq.com/d/14fd093abbdf9097?collection=@joannef/ciscowifi-analysis#avgByMin), which is similar to aggregateByMin, except that it calculates the average instead of the sum.","pinned":false,"hidden":false,"mode":"md"},{"id":364,"value":"rssi = avgByMin(metricsRefined, \"rssi\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"snr = avgByMin(metricsRefined, \"snr\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"Plot.plot({\n color: {\n scheme: \"Purples\",\n reverse: true,\n legend: true,\n },\n width,\n height: 600,\n grid: true,\n x: { label: \"date\" },\n y: { label: \"average client RSSI (dBm) or SNR (db)\", tickFormat: \".1s\" },\n marks: [\n Plot.ruleY([0]),\n Plot.lineY(rssi.concat(snr), {x: \"date\", y: \"value\", stroke: \"field\", strokeWidth: 2}),\n // thresholds for RSSI\n Plot.ruleY([-40], {stroke: \"green\", opacity: 0.2, strokeWidth: 5}),\n Plot.ruleY([-50], {stroke: \"#f5e320\", opacity: 0.3, strokeWidth: 5}),\n Plot.ruleY([-67], {stroke: \"#c41000\", opacity: 0.2, strokeWidth: 4}),\n // thresholds for SNR\n Plot.ruleY([40], {stroke: \"green\", opacity: 0.2, strokeWidth: 5}),\n Plot.ruleY([30], {stroke: \"#f5e320\", opacity: 0.3, strokeWidth: 5}),\n Plot.ruleY([20], {stroke: \"#f5b220\", opacity: 0.3, strokeWidth: 5})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1921,"value":"Only here for a very preliminary glance. Other than that, the graph isn't of much use or doesn't make much sense, since RSSI and SNR don't even use the same units...","pinned":false,"hidden":false,"mode":"md"},{"id":129,"value":"## Speed data values","pinned":false,"hidden":false,"mode":"md"},{"id":169,"value":"#### Let's extract all the unique speed values, and for each, a count of how many client connections during the 24 hour window had that speed.\n\nA map of speed value to frequency:","pinned":false,"hidden":false,"mode":"md"},{"id":955,"value":"speedCounts = countFieldFreqs(metricsRefined, \"speed\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"For example, **${speedCounts.get(6)}** client devices had a connection speed of 6","pinned":false,"hidden":false,"mode":"md"},{"id":180,"value":"#### Plots use arrays for marks, so we'll put all the key-value pairs in our map into an array.","pinned":false,"hidden":false,"mode":"md"},{"id":901,"value":"speedCountsArr = mapToArr(speedCounts);","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"#### The viewof below filters the dataset so that only the speeds for which the count is equal to or above the specified value are kept. Anything below is discarded for the purposes of plotting.","pinned":false,"hidden":false,"mode":"md"},{"id":311,"value":"viewof minCount = Inputs.range([0, 10000], {\n value: 0,\n step: 1,\n label: \"Filter count from: \"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"#### After filtering out speeds with counts below threshold, we are left with these datapoints - which is what the plot relies on","pinned":false,"hidden":false,"mode":"md"},{"id":309,"value":"countsFiltered = speedCountsArr.filter((e) => e.count > minCount)\n// The filter() method creates a shallow copy of a portion of a given array, \n// filtered down to just the elements from the given array that pass the test implemented by the provided function.\n// This function should return a truthy value to keep the element in the resulting array\n// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"Below I just extract the maximum speed from the data, so that in the following viewof's we can limit the highest value the user can drag the bar to","pinned":false,"hidden":false,"mode":"md"},{"id":2051,"value":"maxSpeed = { \n // The d3.max() function expects an array and an accessor function. It goes through the array, uses the \n // accessor on each object to retrieve the value we're interested in, and returns the largest number it finds.\n return d3.max(metricsRefined, o => o.speed);\n}\n\n// Way more elegant than the below!\n/*\nmaxSpeed = {\n return speedCountsArr.reduce((max, obj) => {\n return obj.fieldVal > max ? obj.fieldVal : max;\n }, 0);\n}\n*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"#### Adjust domain (speed) of graph:","pinned":false,"hidden":false,"mode":"md"},{"id":273,"value":"viewof low = Inputs.range([0, maxSpeed], {\n value: 0,\n step: 1,\n label: \"From (speed): \"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"viewof high = Inputs.range([0, maxSpeed * 2], {\n value: maxSpeed,\n step: 1,\n label: \"To (speed):\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"#### (We could probably figure out a way to combine the above two)","pinned":false,"hidden":false,"mode":"md"},{"id":356,"value":"#### Final plot:","pinned":false,"hidden":false,"mode":"md"},{"id":214,"value":"Plot.plot({\n width,\n marginTop: 50,\n x: {\n label: \"speed\",\n domain: [low, high]\n },\n y: {\n grid: true,\n tickFormat: \"+f\",\n label: \"count\",\n },\n r: {range: [0, 40]},\n // color: {type: \"diverging\", scheme: \"PuBuGn\", range: [0, 0.9]},\n color: {\n type: \"threshold\",\n domain: [5000, 10000],\n scheme: \"viridis\",\n reverse: true,\n legend: true\n },\n marks: [\n Plot.ruleY([0]),\n Plot.dot(countsFiltered, {x: \"fieldVal\", y: \"count\", r: \"count\", stroke: \"count\"}), \n // r channel allows dot size to represent quantitative value\n Plot.text(countsFiltered, {\n x: \"fieldVal\",\n y: \"count\",\n text: \"fieldVal\",\n dy: -12, // adjusts the vertical position of the text relative to the data point\n lineAnchor: \"bottom\",\n filter: d => d.count > 10, // If there are too many data points, labels may overlap, making them hard to\n // read. We use the filter transform to choose which points to label\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":883,"value":"#### How about a histogram?","pinned":false,"hidden":false,"mode":"md"},{"id":886,"value":"Plot.plot({\n marginLeft: 50,\n y: {grid: true},\n x: {label: \"Speed\"},\n marks: [\n Plot.rectY(metricsRefined, Plot.binX({y: \"count\"}, {x: \"speed\"})),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"More difficult to look for discrete speed values, especially since we aren't so much interested in how speed values relate to each other on a continuous scale but only in some particular values. The values that are anomalies need to be explained.","pinned":false,"hidden":false,"mode":"md"},{"id":813,"value":"#### The following two functions are like avgByMin, but instead of generating objects with the average of a field value for all objects with the same date, the returned objects hold the minimum / maximum values for the specified field. Both depend on objects with the same date/time being contiguously positioned in the array.","pinned":false,"hidden":false,"mode":"md"},{"id":605,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":810,"value":"function maxsVsTime(data, fieldName) {\n if (data.length === 0) {\n return null;\n }\n const maxs = [];\n let prevTime = new Date();\n let maxObj = null;\n\n for (const obj of data) {\n const currTime = obj.date;\n const fieldVal = obj[fieldName];\n\n // If the current timestamp changes, push the current minimum object into the mins array\n if (currTime.getTime() !== prevTime.getTime()) {\n if (maxObj) {\n maxs.push(maxObj);\n }\n\n prevTime = currTime;\n maxObj = obj;\n } else {\n // update the current minimum object if necessary\n if (fieldVal > maxObj[fieldName]) {\n maxObj = obj;\n }\n }\n }\n\n // Push the last minimum object\n if (maxObj) {\n maxs.push(maxObj);\n }\n\n return maxs;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":603,"value":"rssiMin = minsVsTime(metricsRefined, \"rssi\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":815,"value":"rssiMax = maxsVsTime(metricsRefined, \"rssi\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":762,"value":"#### The following graph shows RSSI against time. The line showing the average RSSI values is currently showing the average across client devices per minute, whereas bins have intervals of 30 minutes. \nShould I make the two time intervals match?","pinned":false,"hidden":false,"mode":"md"},{"id":2101,"value":"viewof showMins = Inputs.toggle({label: html`Show line of minimum RSSI values`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2103,"value":"viewof showMaxs = Inputs.toggle({label: html`Show line of maximum RSSI values`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1253,"value":"### Bins have intervals of 30 minutes","pinned":false,"hidden":false,"mode":"md"},{"id":600,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2086,"value":"genMinLine = (toggleOn) => {\n if (toggleOn) {\n return Plot.lineY(rssiMin, {x: \"date\", y: \"rssi\", strokeWidth: 1});\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2091,"value":"genMaxLine = (toggleOn) => {\n if (toggleOn) {\n return Plot.lineY(rssiMax, {x: \"date\", y: \"rssi\", strokeWidth: 1});\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":821,"value":"- -30 dBm Maximum signal strength\n- -50 dBm Anything down to this level can be regarded as excellent signal strength.\n- -60 dBm This is still good, reliable signal strength.\n- -67 dBm This is the minimum value for all services that require smooth and reliable data traffic (VoIP/VoWi-Fi\nVideo streaming/streaming (not the highest quality))\n- -70 dBm The signal is not very strong, but mostly sufficient (Web, email, and the like)\n- -80 dBm Minimum value required to make a connection. You cannot count on a reliable connection or sufficient signal strength to use services at this level.\n- -90 dBm It is very unlikely that you will be able to connect or make use of any services with this signal strength.\n\n[The above benchmarks are copied from this source](https://eyenetworks.no/en/wifi-signal-strength/)","pinned":false,"hidden":false,"mode":"md"},{"id":1296,"value":"#### Could box plots be more useful for finding quartile ranges and outliers?","pinned":false,"hidden":false,"mode":"md"},{"id":1299,"value":"Plot.plot({\n width,\n marginLeft: 60,\n grid: true,\n y: {\n label: \"RSSI\"\n },\n fx: {\n label: \"time\",\n },\n color: {\n scheme: \"BrBG\"\n },\n marks: [\n Plot.boxY(hourlyMetrics, {fx: \"date\", y: \"rssi\", symbol: \"times\", fill: \"#98B4D4\", stroke: \"#547980\", r: 2}),\n // r controls radius of outliers (x)\n Plot.axisFx({tickFormat: \"%I %p\"}),\n // add text \"%b %e\" e.g., May 23, for just the first and last box plot, above all the hourly times. \n \n // for time format specifiers, refer to\n // https://www.ibm.com/docs/en/cmofz/10.1.0?topic=SSQHWE_10.1.0/com.ibm.ondemand.mp.doc/arsa0257.htm\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2036,"value":"#### These two can be used to graph a minimum and maximum line for SNR, but they are currently not in use","pinned":false,"hidden":false,"mode":"md"},{"id":842,"value":"snrMin = minsVsTime(metricsRefined, \"rssi\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":843,"value":"snrMax = maxsVsTime(metricsRefined, \"rssi\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2031,"value":"#### Change all date fields to collapse hours:","pinned":false,"hidden":false,"mode":"md"},{"id":1307,"value":"hourlyMetrics = collapseTimeHourly(metricsRefined);","pinned":false,"hidden":false,"mode":"ojs"},{"id":2000,"value":"#### Keep the first and last dates readily accessible:","pinned":false,"hidden":false,"mode":"md"},{"id":2324,"value":"timeBounds = {\n const starttime = metricsRefined[0].date;\n const endtime = metricsRefined[metricsRefined.length - 1].date;\n return [{ date: starttime }, { date: endtime }];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":872,"value":"#### The following graph shows Signal to Noise ratio (average, minimum, maximum) against time","pinned":false,"hidden":false,"mode":"md"},{"id":1453,"value":"Pixels are grouped into hexagonal bins, which are represented with a radius that encodes frequency. The binWidth option (default 20) defines the distance between centers of neighboring hexagons in pixels.","pinned":false,"hidden":false,"mode":"html"},{"id":1266,"value":"viewof binWidth = Inputs.range([0.5, 40], {value: 20, label: \"binWidth\", step: 0.1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":840,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":874,"value":"About SNR\n
\nSignal level and SNR","pinned":false,"hidden":false,"mode":"html"},{"id":880,"value":"#### TODO\n\ndistribution of SNR or RSSI within a select time window","pinned":false,"hidden":false,"mode":"md"},{"id":978,"value":"#### Histogram of SNR values' frequency of occurrence within a specified hour:","pinned":false,"hidden":false,"mode":"md"},{"id":1079,"value":"viewof fromTime = Inputs.range([0, 24], {\n value: 0,\n step: 1,\n label: \"Time window starts at (0 means 0 hours after earliest time of dataset): \"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1095,"value":"viewof duration = Inputs.range([0, 24 - fromTime], {\n value: 0,\n step: 1,\n label: \"Time window spans how many ADDITIONAL hours (0 means just the one hour specified above):\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1112,"value":"metricsSubset = {\n const from = timeBounds[0].date.getTime() + (fromTime * 3600000);\n const to = from + (duration * 3600000);\n return getSubset(metricsRefined, from, to);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":984,"value":"snrCounts = countFieldFreqs(metricsSubset, \"snr\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":985,"value":"snrCountsArr = mapToArr(snrCounts);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1531,"value":"#### Function that takes a Date object and returns a nicely formatted, more succinct string representation:","pinned":false,"hidden":false,"mode":"md"},{"id":1527,"value":"formatDate = (date) => {\n const options = { day: \"numeric\", month: \"short\", year: \"numeric\", hour: \"numeric\", hour12: true };\n return date.toLocaleDateString(\"en-GB\", options);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2043,"value":"For example:","pinned":false,"hidden":false,"mode":"md"},{"id":1538,"value":"startDate = metricsSubset[0].date","pinned":false,"hidden":false,"mode":"ojs"},{"id":1541,"value":"endDate = new Date(startDate.getTime() + duration * 60 * 60 * 1000);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1517,"value":"windowStart = formatDate(startDate)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1534,"value":"windowEnd = formatDate(endDate)","pinned":false,"hidden":false,"mode":"ojs"},{"id":980,"value":"Plot.plot({\n y: {\n grid: true, \n label: \"Frequency\"\n },\n x: {label: \"SNR value\"},\n marks: [\n Plot.rectY(metricsSubset, \n Plot.binX({y: \"count\"}, {\n x: {thresholds: snrCounts.size, value: \"snr\"}, \n tip: true\n }\n )),\n Plot.ruleY([0]),\n Plot.ruleX([40], {stroke: \"green\", strokeOpacity: 0.5}),\n Plot.ruleX([25], {stroke: \"#e8d313\", strokeOpacity: 0.8}),\n Plot.ruleX([15], {stroke: \"#c41000\", strokeOpacity: 0.4})\n ], \n caption: `Frequency of SNR values, between ${windowStart} - ${windowEnd}`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1656,"value":"letterFrequency = Plot.plot({\n width,\n x: {label: \"SNR\"},\n marks: [\n Plot.barY(snrCountsArr, {x: \"fieldVal\", y: \"count\",\n fill: d => d.fieldVal >= 40 ? \"#89b85f\" : (d.fieldVal >= 25) ? \"#edd05f\" : \"#ffa673\",\n sort: {x: \"y\", reverse: true}}),\n Plot.ruleY([0])\n ],\n caption: `Frequency of SNR values between ${windowStart} - ${windowEnd}, sorted by frequency`,\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2173,"value":"## Using D3 with animation:","pinned":false,"hidden":false,"mode":"md"},{"id":2191,"value":"viewof order = Inputs.select(new Map([\n [\"SNR, ascending\", (a, b) => d3.ascending(a.fieldVal, b.fieldVal)],\n [\"Frequency, ascending\", (a, b) => d3.ascending(a.count, b.count)],\n [\"Frequency, descending\", (a, b) => d3.descending(a.count, b.count)]\n]), {label: \"Order\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2183,"value":"histogram = BarChart(snrCountsArr, {\n x: d => d.fieldVal,\n y: d => d.count,\n yLabel: \"↑ Frequency\",\n width,\n height: 500,\n color: \"#258f6d\",\n duration: 900 // slow transition for demonstration\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2193,"value":"update = histogram.update(d3.sort(snrCountsArr, order))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2178,"value":"import {BarChart} from \"@d3/bar-chart-transitions\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2202,"value":"[See d3 bar chart source](https://observablehq.com/@d3/bar-chart-transitions)","pinned":false,"hidden":false,"mode":"md"},{"id":2242,"value":"#### Why is tx_retries always 0?","pinned":false,"hidden":false,"mode":"md"},{"id":2247,"value":"tx_retries_vals = countFieldFreqs(metricsRefined, \"tx_retries\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1811,"value":"---\n## Functions","pinned":false,"hidden":false,"mode":"md"},{"id":141,"value":"#### 1. Takes an array of objects, and returns a new array with objects' field values converted into numbers. If any object has a field named `timestamp`, it will be renamed `date` and the corresponding value converted into a Date object.","pinned":false,"hidden":false,"mode":"md"},{"id":145,"value":"function makeFieldsNum(data) {\n const newData = data.map((o) => {\n const newObj = {};\n Object.keys(o).map(k => {\n if (k === \"timestamp\") {\n newObj[\"date\"] = new Date(Number(o[k]) * 1000); // * 1000 to convert from seconds to milliseconds\n } else {\n newObj[k] = Number(o[k]);\n }\n });\n return newObj;\n });\n \n return newData.filter(Boolean);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2359,"value":"#### This version of the function doesn't convert timestamps to dates:","pinned":false,"hidden":false,"mode":"md"},{"id":2362,"value":"function numericize(data) {\n const newData = data.map((o) => {\n const newObj = {};\n Object.keys(o).map((k) => {\n newObj[k] = Number(o[k]);\n });\n return newObj;\n });\n\n return newData.filter(Boolean);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2225,"value":"#### 1.5 Turns out _file_.csv has a typed option, so our data is already all numerical. The only thing then to change is the timestamp field into Date objects.","pinned":false,"hidden":false,"mode":"md"},{"id":2230,"value":"timestampsToDates = (data) => {\n const newData = data.map((o) => {\n const newObj = {};\n Object.keys(o).map(k => {\n if (k === \"timestamp\") {\n newObj[\"date\"] = new Date(Number(o[k]) * 1000); // * 1000 to convert from seconds to milliseconds\n } else {\n newObj[k] = o[k]; // the only line different from the previous function. Kind of a waste?\n }\n });\n return newObj;\n });\n \n return newData.filter(Boolean);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1843,"value":"#### 2. Returns a new array where all objects with the same timestamp (same minute) from the given array are collapsed into one object - containing a `date` field, a `value` field storing the _sum_ of all the specified field's values, and a `field` field storing the _name_ of the field in objects of the original array, which was specified in the argument. The last field can be useful for ","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"function aggregateByMin(data, fieldName) {\n const aggregatedData = [];\n const initDate = data[0].date; \n\n data.forEach((o) => {\n const minsElapsed = (o.date - initDate) / 60000;\n\n if (!aggregatedData[minsElapsed]) {\n aggregatedData[minsElapsed] = { date: o.date, value: 0, field: fieldName, }; // value represents sum\n }\n\n aggregatedData[minsElapsed].value += o[fieldName];\n });\n\n // filter out any empty (falsy) elements\n return aggregatedData.filter(Boolean);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1847,"value":"Here is the old version of aggregateByMin. It is similar in that objects with the same timestamp are collapsed into one, and the values for a specified field are summed. However, the field name carries over, so the effect is that it deletes all the other fields of the original data array, keeping only the named field.","pinned":false,"hidden":false,"mode":"md"},{"id":94,"value":"oldAggregate = function(data, fieldName) {\n const aggregatedData = [];\n\n const initDate = new Date(Number(data[0].timestamp) * 1000);\n\n data.forEach((o) => {\n const date = new Date(Number(o.timestamp) * 1000);\n const minutes = (date - initDate) / 60000;\n\n if (!aggregatedData[minutes]) {\n aggregatedData[minutes] = {\n date: date,\n [fieldName]: 0,\n };\n }\n\n aggregatedData[minutes][fieldName] += Number(o[fieldName]);\n });\n\n // filter out any empty (falsy) elements\n return aggregatedData.filter(Boolean);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"function avgByMin(data, fieldName) {\n data = data.filter(Boolean);\n const avgedData = [];\n\n data.forEach((o) => {\n const minsElapsed = (o.date - data[0].date) / 60000;\n\n if (!avgedData[minsElapsed]) {\n avgedData[minsElapsed] = { date: o.date, counter: 0, value: 0, field: fieldName }; // value represents avg\n }\n\n avgedData[minsElapsed].counter++;\n avgedData[minsElapsed].value += o[fieldName];\n });\n\n avgedData.forEach((o) => {\n o.value /= o.counter;\n delete o.counter;\n });\n\n // filter out any empty (falsy) elements\n return avgedData.filter(Boolean);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":959,"value":"#### 3. Counts up the frequency of a certain field value, returning a map where keys are a field value, and values are the # of occurrences of that key. If we want this to be only a subset of the whole dataset, such as within a certain time window, we need to pass in a `data` array with only the relevant objects (e.g., all objects between 3 pm and 5 pm).","pinned":false,"hidden":false,"mode":"md"},{"id":948,"value":"// function countFieldFreqs(data, fieldName) {\n// const m = new Map();\n// // The map() method creates a new array populated with the results of calling a provided function on every \n// // element in the calling array\n// data.map(\n// // If we only want a specific property value as the function's parameter, not the entire object, \n// // we can use object destructuring in function parameter. Hence { speed }\n// // so that we only pass each object's speed field's value to the function\n// ({ speed }) => { \n// m.set(Number(speed), m.has(speed) ? m.get(speed) + 1 : 1);\n// }\n// );\n// return m;\n// }\n\nfunction countFieldFreqs(data, fieldName) {\n const m = new Map();\n data.map(\n (obj) => { \n const fieldValue = Number(obj[fieldName]);\n m.set(fieldValue, m.has(fieldValue) ? m.get(fieldValue) + 1 : 1);\n }\n );\n return m;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":939,"value":"#### 4. Filters the given dataset for just objects within the specified time frame and returns a new array:\n(Assumes minDate <= maxDate). \n(If the minDate and maxDate arguments are both negative, we just get back the original array)","pinned":false,"hidden":false,"mode":"md"},{"id":923,"value":"// minDate and maxDate are inclusive\nfunction getSubset(data, minDate, maxDate) {\n // TODO: if minDate and maxDate exactly equal first and last times in dataset\n // if (minDate === timeBounds[0].date.getTime() && maxDate === timeBounds[1].date.getTime()) {\n // return data;\n // }\n if (minDate < 0 && maxDate < 0) {\n return data;\n }\n return data.filter(o => {\n const date = o.date.getTime();\n return date >= minDate && date <= maxDate;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2029,"value":"#### 5. TODO: comment for what this function does","pinned":false,"hidden":false,"mode":"md"},{"id":1302,"value":"collapseTimeHourly = (data) => {\n return data.map((o) => {\n let newdate = new Date(o.date);\n\n newdate.setMinutes(0);\n newdate.setSeconds(0);\n\n return { ...o, date: newdate };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"// function findFieldMin(array, fieldName, timestamp) {\n// // Filter the array to get only the objects with the specified timestamp\n// const subset = array.filter(o => o.timestamp === timestamp);\n\n// // Use reduce to find the object with the minimum value field\n// const minimumObj = subset.reduce((min, o) => {\n// return (o[fieldName] < min[fieldName]) ? o : min;\n// }\n// );\n\n// return minimumObj;\n// }\n\n// minExample = findFieldMin(metricsRefined, \"rssi\", 1684866885)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1939,"value":"---\n## APPENDIX","pinned":false,"hidden":false,"mode":"md"},{"id":2146,"value":"### Useful D3 functions","pinned":false,"hidden":false,"mode":"md"},{"id":2148,"value":"d3.maxIndex(array, accessorFunc)\n- returns the index inside the array where the largest value was found, rather than the value.\n\nd3.max/min","pinned":false,"hidden":false,"mode":"md"}],"files":"$W34","stdlib":"1","titling":"auto"}