31:T1372,chart = { const width = 700; const height = width; const innerRadius = Math.min(width, height) * 0.5 - 20; const outerRadius = innerRadius + 12; const opacityDefault = 0.7; const fadeOpacity = 0.1; const chord = d3 .chordDirected() .padAngle(8 / innerRadius) .sortSubgroups(d3.descending) .sortChords(d3.descending); const arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius); const ribbon = d3 .ribbonArrow() .radius(innerRadius - 0.5) .padAngle(1 / innerRadius); const svg = d3 .create("svg") .attr("width", width + 50) .attr("height", height + 50) .attr("viewBox", [ -width / 2 - 10, -height / 2 - 10, width + 50, height + 50 ]) .attr("style", "width: 70%; height: auto; font: 10px sans-serif;"); const chords = chord(matrix); const textId = DOM.uid("text"); svg .append("path") .attr("id", textId.id) .attr("fill", "none") .attr("d", d3.arc()({ outerRadius, startAngle: 0, endAngle: 2 * Math.PI })); const g = svg.append("g").selectAll().data(chords.groups).join("g"); const groupPath = g .append("path") .attr("class", "group") .attr("fill", (d) => typeof names[d.index] === "number" ? colors(totalMetrics.get(`ap${names[d.index]}`)) // aps with higher total metric load get darker colors : "#6e6e6e" ) // APs have their own color, users are all grey .style("opacity", opacityDefault) // .attr("stroke", (d) => d3.rgb(colors(d.index)).darker()) .attr("d", arc) .attr("id", function (d, i) { return "group" + d.index; }) // add id .on("mouseover", (event, d) => fade(fadeOpacity, event, d)) .on("mouseout", (event, d) => fade(opacityDefault, event, d)); g.append("text") .each((d) => (d.angle = (d.startAngle + d.endAngle) / 2)) .attr("dy", "0.35em") .attr( "transform", (d) => ` rotate(${(d.angle * 180) / Math.PI - 90}) translate(${outerRadius + 5}) ${d.angle > Math.PI ? "rotate(180)" : ""} ` ) .attr("text-anchor", (d) => (d.angle > Math.PI ? "end" : null)) .text((d) => arcNames[d.index]); const ribbons = svg .append("g") // .attr("fill-opacity", opacityDefault) .selectAll() .data(chords) .join("path") .attr("class", "ribbons") .attr("d", ribbon) .attr("fill", (d) => getAPcolor(`ap${names[d.target.index]}`)) .style("opacity", opacityDefault) // .attr("stroke", (d) => d3.rgb(colors(d.target.index)).darker()) // .attr("stroke", "#a3a3a3") .attr("stroke", (d) => getAPcolor(`ap${names[d.target.index]}`)) .on("mouseover", (event, d) => { tooltip.transition().duration(100).style("opacity", opacityDefault); tooltip .html( getDescription( names[d.source.index], names[d.target.index], d.source.value ) ) .style("left", event.pageX + 5 + "px") .style("top", event.pageY - 28 + "px"); // fade other ribbons ribbons .filter((dd) => dd !== d) .transition() .style("opacity", fadeOpacity); // fade other groups groupPath .filter( (dd, i) => dd.index !== d.source.index && dd.index !== d.target.index ) .transition() .style("opacity", fadeOpacity); }) .on("mouseout", (event, d) => { tooltip.transition().duration(300).style("opacity", 0); // unfade ribbons ribbons.transition().style("opacity", opacityDefault); // unfade groups groupPath.transition().style("opacity", opacityDefault); }); function fade(opacity, event, d) { tooltip .transition() .duration(100) .style("opacity", opacity <= 0.2 ? opacityDefault : 0); tooltip .html(getText(d)) .style("left", event.pageX + 5 + "px") .style("top", event.pageY - 28 + "px"); ribbons .filter( (dd) => dd.source.index !== d.index && dd.target.index !== d.index ) .transition() .style("opacity", opacity); // fade all other groups groupPath .filter((dd) => dd.index !== d.index) .transition() .style("opacity", opacity); } function getText(obj) { const name = names[obj.index]; if (typeof name === "number") { const numUsers = usersAtT.get(`ap${name}`).length; const numDevices = dataAtT[`ap${name}`].length; return `${numUsers} users (${numDevices} devices) are connected to AP ${name}`; } function findAPs(row) { const aps = []; for (let i = 0; i < row.length; i++) { if (row[i] !== 0) { aps.push(names[i]); // found an ap that the user is connected with } } return aps; } const row = matrix[obj.index]; const apsOfUser = findAPs(row).join(", AP "); return `User ${name} is connected to AP ${apsOfUser} `; } return svg.node(); }32:[{"id":"223d3109a273bd3a24490ec6e11a78943a8a0ddbfdabea0e1c8441af8d72cb71da93b13ab4b12362566a9496ada9c28b9d867de6f5aa838208351f09f39b2e34","href":"https://static.observableusercontent.com/files/223d3109a273bd3a24490ec6e11a78943a8a0ddbfdabea0e1c8441af8d72cb71da93b13ab4b12362566a9496ada9c28b9d867de6f5aa838208351f09f39b2e34","name":"ciscowifi.2023-07-01.csv","type":"text/csv","lastModified":1690153205029.155,"size":8350212},{"id":"a18a202ff568510ea61e5364ffcf704b089e64e53d600659559ef7abf2869fa6517d02c60fdef9d3706da6c5d2e1b94a91eefb9b3533eb7b562daa2cf677864b","href":"https://static.observableusercontent.com/files/a18a202ff568510ea61e5364ffcf704b089e64e53d600659559ef7abf2869fa6517d02c60fdef9d3706da6c5d2e1b94a91eefb9b3533eb7b562daa2cf677864b","name":"ciscowifi.2023-07-31.csv","type":"text/csv","lastModified":1692035590196.113,"size":27794586}] 2f:{"title":"04: Visualizing Data Traffic Between Users and APs","cells":[{"id":0,"value":"# 04: Visualizing Data Traffic Between Users and APs","pinned":false,"hidden":false,"mode":"md"},{"id":1063,"value":"## At ${new Date(ts * 1000)}, how much data was transferred between each access point and its users?","pinned":false,"hidden":false,"mode":"md"},{"id":1776,"value":"viewof metricShown = Inputs.radio([\"bytes\", \"packets\"], {\n value: \"packets\",\n label: \"Metric to display:\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3232,"value":"## ${textcolor(summary.allDevices, \"#3d885f\")} devices (${summary.noUsername} with no username) connected to \n\n## ${textcolor(usersAtT.size, \"#3d885f\")} access points\n\n## ${textcolor(metricShown === \"bytes\" ? formatBytes(sumOfMetric) : formatPackets(sumOfMetric), \"#3d885f\")} sent","pinned":false,"hidden":false,"mode":"md"},{"id":2047,"value":"### Hide access points that transferred less than","pinned":false,"hidden":false,"mode":"md"},{"id":3133,"value":"viewof filterSlider = Scrubber(sliderInput, {\n autoplay: false,\n delay: 100\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3335,"value":"### Select a time:","pinned":false,"hidden":false,"mode":"md"},{"id":3274,"value":"viewof ts = Scrubber(alltimes, {\n autoplay: false,\n format: (d) => fmtTimestamp(d * 1000),\n delay: 300\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1600,"value":"Legend(\n d3\n .scaleSequential()\n .domain([\n 0,\n metricShown === \"bytes\"\n ? Math.floor(maxOfMetric / (1024 * 1024 * 1024)) // bytes -> GB\n : maxOfMetric / 1000000 // pkts -> M pkts\n ])\n .interpolator(d3.interpolateHcl(colorLight, \"#2A4858\")),\n {\n title: `${metricShown} transferred (${\n metricShown === \"bytes\" ? \"GB\" : \"Mil\"\n })`\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":3203,"value":"By the way, \"user 0\" is not actually a single user. All the devices that weren't associated with a username in the raw data are grouped into \"user 0\".\n\nAlso, if a user is connected but didn't transfer any data, the width of the chord is 0 so it is actually not visible.","pinned":false,"hidden":false,"mode":"md"},{"id":761,"value":"---\n## Data Processing","pinned":false,"hidden":false,"mode":"md"},{"id":1663,"value":"apdata = await FileAttachment(\"ciscowifi.2023-07-31.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":769,"value":"sorted = sortbyTimeThenAP(apdata)","pinned":false,"hidden":false,"mode":"ojs"},{"id":771,"value":"#### How we will collapse the data:\n```\ntimestamp1 => {ap1: [{device: \"46m2\", metric: 1246087}, ...], \n ap2: [{device: \"29m11\", metric: 7957372}, ...],\n ...}\ntimestamp2 => {ap1: ... ap2: ...}\n```\n\nmetric can be bytes or pkts transferred (rx + tx)","pinned":false,"hidden":false,"mode":"md"},{"id":788,"value":"collapsed = collapseByTime(sorted, metricShown)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2447,"value":"#### Now let's convert the collapsed info into a format that the chord diagram can use:","pinned":false,"hidden":false,"mode":"md"},{"id":1550,"value":"dataAtT = collapsed.get(ts)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1532,"value":"usersAtT = usersMap(dataAtT)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2453,"value":"#### Final result:","pinned":false,"hidden":false,"mode":"md"},{"id":792,"value":"data = {\n if (usersAtT.length <= 0) {\n return [];\n }\n\n const result = [];\n\n usersAtT.forEach((arr, key) => {\n const parsed = key.match(/\\d+/);\n const apInt = parseInt(parsed[0]);\n arr.forEach((obj) => {\n result.push({\n source: `${obj.user}`,\n target: apInt,\n value: obj.metric\n });\n });\n });\n\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2457,"value":"#### Data Processing Functions:","pinned":false,"hidden":false,"mode":"md"},{"id":776,"value":"sortbyTimeThenAP = (data) =>\n [...data].sort((a, b) => {\n if (a.timestamp === b.timestamp) {\n return a.ap - b.ap;\n }\n return a.timestamp - b.timestamp;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":783,"value":"function collapseByTime(data, metric) {\n let metricRx, metricTx;\n if (metric === \"bytes\") {\n metricRx = \"bytes_rx\";\n metricTx = \"bytes_tx\";\n } else {\n metricRx = \"pkts_rx\";\n metricTx = \"pkts_tx\";\n }\n\n const result = new Map();\n\n data.forEach((o) => {\n const { ap, user, mac, timestamp } = o;\n const metricVal = o[metricRx] + o[metricTx];\n const fieldName = `ap${ap}`;\n const device = `${user}m${mac}`;\n\n if (!result.has(timestamp)) {\n result.set(timestamp, {});\n }\n\n if (!result.get(timestamp).hasOwnProperty(fieldName)) {\n result.get(timestamp)[fieldName] = [];\n }\n\n result\n .get(timestamp)\n [fieldName].push({ device: device, metric: metricVal });\n });\n\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1684,"value":"function filterByMetric(usersAtT, level) {\n if (level <= 0) {\n return usersAtT;\n }\n const filtered = new Map(\n [...usersAtT.entries()].filter(([ap, data]) => {\n const totalMetric = data.reduce(\n (accumulator, o) => accumulator + o.metric,\n 0\n );\n return totalMetric >= level;\n })\n );\n return filtered;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1514,"value":"usersMap = (dataAtT) => {\n const users = new Map();\n const result = new Map();\n\n Object.entries(dataAtT).forEach(([ap, devices]) => {\n if (Array.isArray(devices)) {\n devices.forEach((obj) => {\n const u = extractUser(obj.device);\n if (!users.has(u)) {\n users.set(u, obj.metric);\n } else {\n const currVal = users.get(u);\n users.set(u, currVal + obj.metric);\n }\n });\n result.set(\n ap,\n Array.from(users.entries()).map(([user, metric]) => ({ user, metric }))\n );\n users.clear();\n }\n });\n\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":998,"value":"// given string in the format \"111m222\" where 111 is the user and 222 is the mac\nfunction extractUser(str) {\n const indexM = str.indexOf(\"m\");\n if (indexM !== -1) {\n const numberStr = str.substring(0, indexM);\n const number = parseInt(numberStr);\n if (!isNaN(number)) {\n return number;\n }\n }\n return null;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2399,"value":"---\n### Functions for Formatting, Text and Color","pinned":false,"hidden":false,"mode":"md"},{"id":1259,"value":"getTimeLimits = (data) => {\n const fromTs = data[0].timestamp * 1000;\n const toTs = data[data.length - 1].timestamp * 1000;\n return {\n from: new Date(fromTs),\n fromTs,\n to: new Date(toTs),\n toTs\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2217,"value":"function fmtTimestamp(ts) {\n const date = new Date(ts);\n return `${date.getMonth() + 1}/${date.getDate()} ${date\n .getHours()\n .toString()\n .padStart(2, \"0\")}:${date.getMinutes().toString().padStart(2, \"0\")}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3663,"value":"function splitAtFirstSpace(str) {\n const spaceIdx = str.indexOf(\" \");\n return [str.slice(0, spaceIdx), str.slice(spaceIdx + 1)];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3715,"value":"decoder = metricShown === \"bytes\" ? convertToBytes : convertToLong","pinned":false,"hidden":false,"mode":"ojs"},{"id":2162,"value":"function convertToBytes(value, unit) {\n switch (unit) {\n case \"Bytes\":\n return +value;\n case \"KB\":\n return +value * 1024;\n case \"MB\":\n return +value * 1024 * 1024;\n case \"GB\":\n return +value * 1024 * 1024 * 1024;\n case \"TB\":\n return +value * 1024 * 1024 * 1024 * 1024;\n default:\n throw new Error(\"Invalid unit provided.\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2197,"value":"function convertToLong(value, unit) {\n switch (unit) {\n case \"\":\n return +value;\n case \"K\":\n return +value * 1000;\n case \"M\":\n return +value * 1000000;\n case \"B\":\n return +value * 1000000000;\n default:\n throw new Error(\"Invalid unit provided.\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":927,"value":"// colors = d3\n// .scaleOrdinal()\n// .domain(d3.range(maxNumUsers))\n// .range(d3.quantize(d3.interpolateHcl(colorLight, \"#2A4858\"), maxNumUsers))\n\ncolors = d3\n .scaleSequential()\n .domain([0, maxOfMetric])\n .interpolator(d3.interpolateHcl(colorLight, colorDark))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1973,"value":"// takes \"ap #\" as argument\ngetAPcolor = (apname) => {\n const totalLoad = totalMetrics.get(apname);\n if (totalLoad < +apFilter) {\n return \"rgba(0, 0, 0, 0)\";\n }\n return colors(totalLoad);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2053,"value":"formatter = metricShown === \"bytes\" ? formatBytes : formatPackets","pinned":false,"hidden":false,"mode":"ojs"},{"id":1723,"value":"function formatBytes(bytes) {\n if (bytes === 0) {\n return \"0 Bytes\";\n }\n\n const k = 1024;\n const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\", \"TB\", \"PB\", \"EB\", \"ZB\", \"YB\"];\n\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n const formatted = parseFloat((bytes / Math.pow(k, i)).toFixed(2));\n\n return `${formatted} ${sizes[i]}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1834,"value":"function formatPackets(pkts) {\n const units = [\"\", \" K\", \" M\", \" B\", \" T\"];\n\n let i = 0;\n while (pkts >= 1000 && i < units.length - 1) {\n pkts /= 1000;\n i++;\n }\n\n const formattedNumber = pkts.toFixed(2).replace(/\\.?0+$/, \"\");\n return `${formattedNumber}${units[i]} packets`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1872,"value":"function getDescription(user, ap, val) {\n let readable;\n if (metricShown === \"bytes\") {\n readable = formatBytes(val);\n } else {\n readable = formatPackets(val);\n }\n return `${readable} was transferred between user ${user} and AP ${ap}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1035,"value":"html``\n// Arial, Verdana,","pinned":false,"hidden":false,"mode":"ojs"},{"id":2893,"value":"---\n#### Other processing for chord diagram:","pinned":false,"hidden":false,"mode":"md"},{"id":1033,"value":"tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"tooltip\")\n .style(\"width\", \"text.length + 'px'\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1655,"value":"timeLimits = getTimeLimits(apdata)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2169,"value":"apFilter = {\n let [numStr, unit] = filterSlider.split(\" \");\n if (unit === \"packets\") {\n unit = \"\";\n }\n\n return decoder(parseInt(numStr), unit);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1207,"value":"In the `names` array, integers are APs, and strings are users:","pinned":false,"hidden":false,"mode":"md"},{"id":861,"value":"// given an array with elements which may be ints or strings, puts all the ints first, fillowed by all strings. Among ints, sort in ascending order. Among strings, sort in ascending order of users\n\nmySort = (a, b) => {\n if (typeof a === \"number\" && typeof b === \"number\") {\n return a - b; // Sort numbers in ascending order\n }\n if (typeof a === \"string\" && typeof b === \"string\") {\n return parseInt(a) - parseInt(b);\n }\n if (typeof a === \"number\") {\n return -1; // Numbers come before strings\n }\n return 1; // Strings come after numbers\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1081,"value":"names = {\n const namesWithDups = data.flatMap((d) => [d.source, d.target]);\n const names = Array.from(new Set(namesWithDups));\n names.sort(mySort);\n return names;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1228,"value":"arcNames = {\n const result = names.map((name) => {\n if (typeof name === \"string\") {\n return \"u\" + name;\n }\n return name;\n });\n\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":888,"value":"matrix = {\n // Compute a dense matrix from the weighted links in data.\n const index = new Map(names.map((name, i) => [name, i]));\n const matrix = Array.from(index, () => new Array(names.length).fill(0));\n for (const { source, target, value } of data)\n matrix[index.get(source)][index.get(target)] += value;\n\n return matrix;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1951,"value":"colorLight = \"#c2e075\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1962,"value":"colorDark = \"#2a5853\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1713,"value":"maxOfMetric = Math.max(...[].concat(...totalMetrics.values()))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1711,"value":"totalMetrics = new Map(\n [...usersAtT.entries()].map(([key, arr]) => {\n const totalMetric = arr.reduce(\n (accumulator, obj) => accumulator + obj.metric,\n 0\n );\n return [key, totalMetric];\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3210,"value":"function summarize(dataAtT) {\n let count = 0;\n let totalDevices = 0;\n\n // Iterate through all the fields of the object\n for (const field of Object.values(dataAtT)) {\n totalDevices += field.length;\n for (const entry of field) {\n // Check if the device's username is 0\n if (entry.device.charAt(0) === \"0\") {\n count++;\n }\n }\n }\n\n return { allDevices: totalDevices, noUsername: count };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3219,"value":"summary = summarize(dataAtT)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3262,"value":"sumOfMetric = Array.from(totalMetrics.values()).reduce(\n (acc, currVal) => acc + currVal,\n 0\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3315,"value":"alltimes = getUniqueTimes(sorted)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3507,"value":"function createSliderInput(metricMax) {\n const [numStr, endUnit] = splitAtFirstSpace(formatter(metricMax));\n\n const units =\n metricShown === \"bytes\"\n ? [\"Bytes\", \"KB\", \"MB\", \"GB\"]\n : [\"packets\", \"K packets\", \"M packets\", \"B packets\"];\n const numLimit = metricShown === \"bytes\" ? 1023 : 999;\n\n const endUnitIdx = units.indexOf(endUnit);\n if (endUnitIdx === -1) {\n return [];\n }\n\n const result = [];\n for (let i = 0; i < endUnitIdx; i++) {\n const currUnit = units[i];\n for (let n = 1; n <= numLimit; n++) {\n result.push(`${n} ${currUnit}`);\n }\n }\n\n const maxNum = Math.min(numLimit, Math.floor(parseInt(numStr)));\n for (let i = 1; i <= maxNum; i++) {\n result.push(`${i} ${endUnit}`);\n }\n\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3578,"value":"sliderInput = createSliderInput(maxOfMetric)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2534,"value":"### Imports:","pinned":false,"hidden":false,"mode":"md"},{"id":1597,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2172,"value":"import { pack } from \"@esperanc/range-input-variations\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3321,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2035,"value":"import { Range } from \"@esperanc/range-input-variations\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3228,"value":"import { textcolor } from \"@observablehq/text-color-annotations-in-markdown\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3303,"value":"import { getUniqueTimes } from \"a293ce156ff5c28d\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}