34:["$","title",null,{"children":"Network Data Visualisation from Radiflow Testbed | matthewnunes | Observable"}] 3c:T2c05,chart = { console.log(dotSizeVariable); const svg = d3.select(DOM.svg(width+margin.right+margin.left, height+margin.top+margin.bottom)); var zoomBase = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") var dataset; var sample_size = Math.round(dataset_sample * data.length); if (sample_size === data.length) { dataset = data; console.log(dataset.length); } else { var dataset_indexes = Array.from({length: sample_size}, () => Math.floor(Math.random() * (data.length))); dataset = dataset_indexes.map(i => data[i]); } var ip_values = []; Object.keys(ipaddress_map).forEach(function(key) { ip_values.push(ipaddress_map[key]); }); var classification_mapping = {0:"Normal", 1:"Ransomware", 2:"MiTM", 3:"Trojan"}; var portRange = d3.extent(dataset, d=>d.Sport); //var srcRange = d3.extent(dataset, d=>d.SrcRate); // Add X axis // scalePoint creates scale functions that map from a discrete set of values to equally spaced points along the specified range var x = d3.scalePoint() .domain(ip_values) .range([50, width]); var xAxis = g => g .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x).ticks(ip_values.length)) svg.append("g") .attr("class", "x axis") .call(xAxis) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-65)"); // Add X axis label: svg.append("text") .attr("text-anchor", "end") .attr("x", width - 100) .attr("y", height + 100 ) .text("IP Address"); // Add Y axis var y = d3.scaleLinear() .domain(portRange) .range([ height, margin.top]); const gy = svg.append("g") .attr("class", "yaxis") .attr("transform", "translate(50,0)") .call(yAxis, y); // Add Y axis label: svg.append("text") .attr("text-anchor", "end") .attr("x", 10) .attr("y", 0 ) .text("Source Port") .attr("text-anchor", "start") // Add a scale for bubble size var srcRange = d3.extent(dataset, d=>d[dotSizeVariable]); var z; if (size_encoding === "On") { z = d3.scaleLinear() .domain(srcRange) .range([ 0, 30]); } else { z = function(d) { return 5; } } // ---------------------------// // TOOLTIP // // ---------------------------// // -1- Create a tooltip div that is hidden by default: var tooltip = d3.select("body") .append("div") .style("opacity", 0) .attr("class", "tooltip") .style("background-color", "black") .style("border-radius", "5px") .style("padding", "10px") .style("color", "white") .style("position", "absolute"); svg.append("g") .append("text") .attr("class", "portSelected") .attr("x", width + (margin.right/5)) .attr("y", height/2) .html("Port Selected: ") var showYtick = function (event, d) { d3.select(".portSelected") .html("Port Selected: " + d.Sport) .transition() .duration(200) } var hideYtick = function (event, d) { d3.select(".portSelected") .html("Port Selected: ") .transition() .duration(200) } var showTooltip = function(event, d) { showYtick(event, d); tooltip .transition() .duration(200) tooltip .style("opacity", 1) .html(dotSizeVariable.concat(": " + Math.round(d[dotSizeVariable]))) .style("left", (event.pageX+15) + "px") .style("top", (event.pageY+15) + "px") } var moveTooltip = function(event, d) { tooltip .style("left", (event.pageX+15) + "px") .style("top", (event.pageY+15) + "px") } var hideTooltip = function(event, d) { hideYtick(event, d); tooltip .transition() .duration(200) .style("opacity", 0) } // ---------------------------// // HIGHLIGHT GROUP // // ---------------------------// // What to do when one group is hovered var highlight = function(event, d){ // reduce opacity of all groups d3.selectAll(".bubbles").style("opacity", .01) // expect the one that is hovered d3.selectAll("."+classification_mapping[d]).style("opacity", 1) } function clickFunc(event, d) { for (var key of Object.keys(d)) { d[key] = Math.round((d[key] + Number.EPSILON) * 100) / 100 } mutable data_given = d; } // And when it is not hovered anymore var noHighlight = function(event, d){ d3.selectAll(".bubbles").style("opacity", 0.6) } // ---------------------------// // CIRCLES // // ---------------------------// d3.select("g.graphContent").selectAll(".bubbles").remove().transition().duration(2000); // Add dots var dots; if (circle_radius === "Circles"){ var dots = svg.append('g') .attr("class", "graphContent") .selectAll("dot") .data(dataset) .enter() .append("circle") .attr("class", function(d) { return "bubbles ".concat(classification_mapping[d.Classification]) }) .attr("cx", function (d) { if (jitter === "On") { if (Math.random() >= 0.5) { return (x(ipaddress_map[d.SrcAddr]) + (Math.random() * 10)); } else { return (x(ipaddress_map[d.SrcAddr]) - (Math.random() * 10)); } } else { return x(ipaddress_map[d.SrcAddr]); } }) .attr("cy", function (d) { return y(d.Sport); } ) .attr("r", function (d) { return 0; } ) .style("fill", function (d) { return myColor(d.Classification); } ) // -3- Trigger the functions for hover .on("mouseover", showTooltip ) .on("mousemove", moveTooltip ) .on("mouseleave", hideTooltip ) .on("click", clickFunc) dots .transition() .ease(d3.easeLinear) .delay(function(d,i){ return i/10; }) .duration(2000) .attr("r", function (d) { return z(d[dotSizeVariable]); } ) } else { //Draw discs instead of dots var dots = svg.append('g') .attr("class", "graphContent") .selectAll("dot") .data(dataset) .enter() .append("path") .attr("class", function(d) { return "bubbles ".concat(classification_mapping[d.Classification]) }) .attr("transform", function(d) { if (jitter === "On") { if (Math.random() >= 0.5) { var x_val = x(ipaddress_map[d.SrcAddr]) + (Math.random() * 10) return `translate(${x_val}, ${y(d.Sport)})` } else { var x_val = x(ipaddress_map[d.SrcAddr]) - (Math.random() * 10) return `translate(${x_val}, ${y(d.Sport)})` } } else { return `translate(${x(ipaddress_map[d.SrcAddr])}, ${y(d.Sport)})` } }) .attr("d", d3.arc() .innerRadius( d => z(d[dotSizeVariable]) / 2 ) .outerRadius( d => z(d[dotSizeVariable]) ) .startAngle( 3.14 ) // It's in radian, so Pi = 3.14 = bottom. .endAngle( 12.56 ) // 2*Pi = 6.28 = top ) .style("fill", function (d) { return myColor(d.Classification); } ) // -3- Trigger the functions for hover .on("mouseover", showTooltip ) .on("mousemove", moveTooltip ) .on("mouseleave", hideTooltip ); } // ---------------------------// // LEGEND // // ---------------------------// // Add legend: circles var srcRateColumn = dataset.map(function(d) { return d[dotSizeVariable] }) var srcMedian = d3.median(dataset, d=>d[dotSizeVariable]) var highQuantile = d3.quantile(srcRateColumn, 0.95); var lowQuantile = d3.quantile(srcRateColumn, 0.03); var valuesToShow = [lowQuantile, highQuantile, srcRange[1]] var xCircle = width + margin.right/3; var xLabel = width + margin.right/2; var legendHeight = height/3; svg .selectAll("legend") .data(valuesToShow) .enter() .append("circle") .attr("cx", xCircle) .attr("cy", function(d){ return legendHeight - z(d) } ) .attr("r", function(d){ return z(d) }) .style("fill", "none") .attr("stroke", "black") // Add legend: segments svg .selectAll("legend") .data(valuesToShow) .enter() .append("line") .attr('x1', function(d){ return xCircle + z(d) } ) .attr('x2', xLabel) .attr('y1', function(d){ return legendHeight - z(d) } ) .attr('y2', function(d){ return legendHeight - z(d) } ) .attr('stroke', 'black') .style('stroke-dasharray', ('2,2')) // Add legend: labels svg .selectAll("legend") .data(valuesToShow) .enter() .append("text") .attr('x', xLabel) .attr('y', function(d){ return legendHeight - z(d) } ) .text( function(d){ return Math.floor(d) } ) .style("font-size", 10) .attr('alignment-baseline', 'middle') // Legend title svg.append("text") .attr('x', xCircle) .attr("y", legendHeight+30) .text(dotSizeVariable + " Size Guide") .attr("text-anchor", "middle") // Add one dot in the legend for each name. var size = 20 var allgroups = ["0", "1", "2", "3"] svg.selectAll("myrect") .data(allgroups) .enter() .append("circle") .attr("cx", width + (margin.right / 3)) .attr("cy", function(d,i){ return 10 + i*(size+5)}) // 100 is where the first dot appears. 25 is the distance between dots .attr("r", 7) .style("fill", function(d){ return myColor(d)}) .on("mouseover", highlight) .on("mouseleave", noHighlight) // Add labels beside legend dots svg.selectAll("mylabels") .data(allgroups) .enter() .append("text") .attr("x", width + (margin.right / 3) + size*.8) .attr("y", function(d,i){ return i * (size + 5) + (size/2)}) // 100 is where the first dot appears. 25 is the distance between dots .style("fill", function(d){ return myColor(d)}) .text(function(d){ return classification_mapping[parseInt(d)]}) .attr("text-anchor", "left") .style("alignment-baseline", "middle") .on("mouseover", highlight) .on("mouseleave", noHighlight) /** * * ZOOMING FUNCTIONALITY * */ function handleZoom(e) { x.range([50, width].map(d => e.transform.applyX(d))); svg.selectAll(".graphContent circle").attr("cx", d => x(ipaddress_map[d.SrcAddr])); svg.selectAll(".x.axis").call(xAxis); const zy = e.transform.rescaleY(y).interpolate(d3.interpolateRound); e.transform.x = 0; svg.selectAll(".graphContent circle").attr("transform", e.transform) svg.selectAll(".graphContent circle").attr("r", function (d) { return z(d[dotSizeVariable]) / e.transform.k; } ) gy.call(yAxis, zy); //var yNew = e.transform.rescaleY(y).interpolate(d3.interpolateRound); //gy.call(yAxis, yNew); //dots.attr("transform", e.transform); //svg.attr("transform", e.transform); } const zoom = d3.zoom() .scaleExtent([1,30]) .translateExtent([[0, 0], [width + margin.right + margin.left, height + margin.top + margin.bottom]]) .on("zoom", handleZoom) svg.call(zoom) ; /** return Object.assign(svg.node(), { reset() { svg.transition() .duration(750) .call(zoom.transform, d3.zoomIdentity); } });*/ return svg.node() }3d:Tcab,double_slider = function(min, max) { var range = [min, max] // set width and height of svg var w = 400 var h = 95 var margin = {top: 30, bottom: 30, left: 30, right: 40} // dimensions of slider bar var width = w - margin.left - margin.right; var height = h - margin.top - margin.bottom; // create x scale var x = d3.scaleLinear() .domain(range) // data space .range([0, width]); // display space // create svg and translated g var svg = d3.select(DOM.svg(w,h)) const g = svg.append('g').attr('transform', `translate(${margin.left}, ${margin.top})`) // labels var labelL = g.append('text') .attr('id', 'labelleft') .attr('x', 0) .attr('y', height + 5) var labelR = g.append('text') .attr('id', 'labelright') .attr('x', 0) .attr('y', height + 5) // define brush var brush = d3.brushX() .extent([[0,0], [width, height]]) .on('brush', function(event) { var s = event.selection; // update and move labels labelL.attr('x', s[0]) .text((x.invert(s[0]).toFixed(2))) labelR.attr('x', s[1]) .text((x.invert(s[1]).toFixed(2))) // move brush handles handle.attr("display", null).attr("transform", function(d, i) { return "translate(" + [ s[i], - height / 4] + ")"; }); // update view // if the view should only be updated after brushing is over, // move these two lines into the on('end') part below svg.node().value = s.map(function(d) {var temp = x.invert(d); return +temp.toFixed(2)}); svg.node().dispatchEvent(new CustomEvent("input")); }) // append brush to g var gBrush = g.append("g") .attr("class", "brush") .call(brush) // add brush handles (from https://bl.ocks.org/Fil/2d43867ba1f36a05459c7113c7f6f98a) var brushResizePath = function(d) { var e = +(d.type == "e"), x = e ? 1 : -1, y = height / 2; return "M" + (.5 * x) + "," + y + "A6,6 0 0 " + e + " " + (6.5 * x) + "," + (y + 6) + "V" + (2 * y - 6) + "A6,6 0 0 " + e + " " + (.5 * x) + "," + (2 * y) + "Z" + "M" + (2.5 * x) + "," + (y + 8) + "V" + (2 * y - 8) + "M" + (4.5 * x) + "," + (y + 8) + "V" + (2 * y - 8); } var handle = gBrush.selectAll(".handle--custom") .data([{type: "w"}, {type: "e"}]) .enter().append("path") .attr("class", "handle--custom") .attr("stroke", "#000") .attr("fill", '#eee') .attr("cursor", "ew-resize") .attr("d", brushResizePath); // override default behaviour - clicking outside of the selected area // will select a small piece there rather than deselecting everything // https://bl.ocks.org/mbostock/6498000 gBrush.selectAll(".overlay") .each(function(d) { d.type = "selection"; }) .on("mousedown touchstart", brushcentered) function brushcentered() { var dx = x(1) - x(0), // Use a fixed width when recentering. cx = d3.mouse(this)[0], x0 = cx - dx / 2, x1 = cx + dx / 2; d3.select(this.parentNode).call(brush.move, x1 > width ? [width - dx, width] : x0 < 0 ? [0, dx] : [x0, x1]); } // select entire range gBrush.call(brush.move, range.map(x)) return svg.node() }3e:[{"id":"33c493f0e5b247189cd9054010b8da4fb8c87d7fb35b9e8aacd02e869112ed312f36ca3d6dad8278b97db2e23857c537f9b4f0461fa972d2de593bed7791dee9","href":"https://static.observableusercontent.com/files/33c493f0e5b247189cd9054010b8da4fb8c87d7fb35b9e8aacd02e869112ed312f36ca3d6dad8278b97db2e23857c537f9b4f0461fa972d2de593bed7791dee9","name":"RadiflowManyVars.csv","type":"text/csv","lastModified":1626345311966.265,"size":2056735},{"id":"835eff4af39b9c233770c3f281f2ce17dea9499acd526c6b70c8a0dbf6cd4b2da728827a934c6da6d7c1101c5d38dc2d20e7aa6384e57365dcf2d4c8dc642c1b","href":"https://static.observableusercontent.com/files/835eff4af39b9c233770c3f281f2ce17dea9499acd526c6b70c8a0dbf6cd4b2da728827a934c6da6d7c1101c5d38dc2d20e7aa6384e57365dcf2d4c8dc642c1b","name":"ipdict_radiflow.json","type":"application/json","lastModified":1626345656273.674,"size":585},{"id":"e8b9f7170c7c5707925996d7f64c6211e03fc939221b13c443f0f8bd17b96881d8bf2388c8b2efc1f188aa95a57efe52e56c4c404516ffc1090bd6a5922f24b5","href":"https://static.observableusercontent.com/files/e8b9f7170c7c5707925996d7f64c6211e03fc939221b13c443f0f8bd17b96881d8bf2388c8b2efc1f188aa95a57efe52e56c4c404516ffc1090bd6a5922f24b5","name":"ipdict_radiflow_red.json","type":"application/json","lastModified":1626434945917.948,"size":311}] 38:{"id":"c0fcb30174103608","slug":"network-data-visualisation-from-radiflow-testbed","title":"Network Data Visualisation from Radiflow Testbed","thumbnail":"e97e74dbdcf75657d2ea32f26ea3481d8d44625d56ee05b6abcaf0e260372c3a","access_level":"public","create_time":"$D2021-07-15T10:31:56.233Z","update_time":"$D2022-09-29T18:46:24.266Z","view_time":null,"first_public_time":"$D2021-07-16T10:41:59.368Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"83629d35bcf24196","login":"matthewnunes","name":"","avatar_url":"https://avatars-next.observableusercontent.com/69be47a382c797bba35ded66dfe273dcf44358d412c6e0cda4362134b1994dda","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":690,"publish_version":690,"role":null,"authored":false,"authors":[{"type":"individual","id":"a9dea92c739b1d44","login":"matthewnunes","name":"","avatar_url":"https://avatars-next.observableusercontent.com/69be47a382c797bba35ded66dfe273dcf44358d412c6e0cda4362134b1994dda","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"a9dea92c739b1d44","login":"matthewnunes","name":"","avatar_url":"https://avatars-next.observableusercontent.com/69be47a382c797bba35ded66dfe273dcf44358d412c6e0cda4362134b1994dda","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Network Data Visualisation from Radiflow Testbed","cells":[{"id":0,"value":"md`# Network Data Visualisation from Radiflow Testbed`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"data = FileAttachment(\"RadiflowManyVars.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"Object.keys(data[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"data.forEach(d => {\n d.SrcAddr = d.SrcAddr;\n d.Sport = parseInt(d.Sport);\n d.Classification = parseInt(d.Classification);\n d.SrcRate = parseFloat(d.SrcRate);\n d.sMeanPktSz = parseFloat(d.sMeanPktSz);\n d.Rate = parseFloat(d.Rate);\n d.AckDat = parseFloat(d.AckDat);\n d.SynAck = parseFloat(d.SynAck);\n d.TcpRtt = parseFloat(d.TcpRtt);\n d.pLoss = parseFloat(d.pLoss);\n d.SrcLoss = parseFloat(d.SrcLoss);\n d.SrcLoad = parseFloat(d.SrcLoad);\n d.Load = parseFloat(d.Load);\n d.SrcBytes = parseFloat(d.SrcBytes);\n d.TotBytes = parseFloat(d.TotBytes);\n d.SrcPkts = parseFloat(d.SrcPkts);\n d.TotPkts = parseFloat(d.TotPkts);\n d.Mean = parseFloat(d.Mean);\n d.RunTime = parseFloat(d.RunTime);\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":" myColor = d3.scaleOrdinal()\n .domain([0, 1, 2, 3])\n .range([\"#107dac\", \"#e0301e\", \"#C15D0A\", \"#e7b416\"]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"ipaddress_text = FileAttachment(\"ipdict_radiflow_red.json\").text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"ipaddress_map = JSON.parse(ipaddress_text)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"html` \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"margin = [{top: 40, right: 350, bottom: 80, left:0}][0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"width = 1000 - (margin.right + margin.left)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"height = 1000 - (margin.top + margin.bottom)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"mutable data_given = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"k = height / width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"yAxis = (g, y) => g\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").attr(\"display\", \"none\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"viewof dotSizeVariable = DOM.select([\"SrcRate\", \"sMeanPktSz\",\"Rate\",\"AckDat\",\"SynAck\",\"TcpRtt\",\"pLoss\",\"SrcLoss\",\"SrcLoad\",\"Load\",\"SrcBytes\",\"TotBytes\",\"SrcPkts\",\"TotPkts\",\"Mean\",\"RunTime\"]);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"viewof jitter = radio({\n title: 'Jitter',\n description: 'Select whether you would like jitter added to the bubbles along the x dimension',\n value:\"Off\",\n options:[\"On\", \"Off\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"viewof size_encoding = radio({\n title: 'Size Encoding',\n description: 'Select whether you would like the to switch off the size encoding of the bubbles',\n value:\"On\",\n options:[\"On\", \"Off\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"viewof circle_radius = radio({\n title: 'Circles or Discs',\n description: 'Select whether you would like the dots to be circles or discs',\n value:\"Circles\",\n options:[\"Circles\", \"Discs\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"viewof dataset_sample = slider({\n min: 0, \n max: 1, \n step: 0.01, \n format: \".0%\",\n value: 1,\n description: \"Select the percetage of data that should be displayed\",\n title: \"Percentage of Data to display\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"md` #### Use the double-ended slider to select the size of bubbles you'd like to see`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"viewof size_selection = double_slider(d3.min(data, d=>d[dotSizeVariable]), d3.max(data, d=>d[dotSizeVariable]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"render_data_table(Array(data_given));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"render_data_table = options => html`\n \n ${Object.keys(options[0]).map((d, i) => {\n let label = d;\n return ``;\n })}\n \n \n \n ${options\n .filter((d, i) => i < 100)\n .map(row => {\n return html`${Object.values(row).map(col => {\n return ``;\n })}`;\n })}\n \n

${label}
${col}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"//import {\n // render_data_table\n//} from \"@info474/utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"slider_control = {\n var selected_dots = d3.selectAll(\".bubbles\")\n .filter(function(d) { return (d[dotSizeVariable] < size_selection[0]) || (d[dotSizeVariable] > size_selection[1]); });\n var unselected_dots = d3.selectAll(\".bubbles\")\n .filter(function(d) { return (d[dotSizeVariable] >= size_selection[0]) && (Math.floor(d[dotSizeVariable]) <= size_selection[1]);});\n \n selected_dots.style(\"fill\", \"lightgray\")\n .transition()\n .duration(200);\n \n unselected_dots.style(\"fill\", d => myColor(d.Classification))\n .transition()\n .duration(200);\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1"}} 33:null