34:["$","title",null,{"children":"Network Data Visualisation for Radiflow Normal Data | matthewnunes | Observable"}] 3c:T996,html` `3d:T150f,function drawChart() { const margin = {top: 20, right: 20, bottom: 90, left: 10}; const width = 1060 - margin.left - margin.right, height = 800 - margin.top - margin.bottom; const svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) //.attr("viewBox", [0, 0, width, height]) //.attr("style", "max-width: 100%; height: auto; height: intrinsic;"); var div = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0); var x1Accessor = d => ipaddress_map[d.SrcAddr]; var x2Accessor = d => ipaddress_map[d.DstAddr]; var y1Accessor = d => d.Sport; var y2Accessor = d => d.Dport; var r1Accessor = d => d.SrcBytes; var r2Accessor = d => d.DstBytes; var xScale = d3.scalePoint() .domain(used_addresses) //.paddingInner(0.5); var config1 = { top: 10, left: 80, width: 450, height: height, dotClassName: "dot1", xLabel: "Source IP Address", tickSize: 0, domainOpacity: 0, xAxisOffset: 10, yAxisOffset: 10, yTicks: null, drawingName: "drawingAreaFirst", fill: "#ffb4d9" }; var config2 = { top: 10, left: 600, width: 450, height: height, dotClassName: "dot2", xLabel: "Destination IP Address", tickSize: 0, domainOpacity: 0, xAxisOffset: 10, yAxisOffset: 10, yTicks: 3, drawingName: "drawingAreaSecond", fill: "#90bcf9" }; // Draws a scatter plot var plot1 = scatterPlot(svg, config1, xScale, y1Scale, r1Scale, x1Accessor, y1Accessor, r1Accessor); var plot2 = scatterPlot(svg, config2, xScale, y2Scale, r2Scale, x2Accessor, y2Accessor, r2Accessor); function scatterPlot(mysvg, cfg, x, y, r, xAcc, yAcc, rAcc) { var plot = mysvg.append("g") .attr("class", "scatter-plot") .attr("transform", "translate(" + [cfg.left, cfg.top] + ")"); plot.append("rect") .attr("class", "chart-background") .attr("width", cfg.width) .attr("height", cfg.height); x.range([0, cfg.width]); y.range([cfg.height, 0]); var xAxis = d3.axisBottom(x) .ticks(used_addresses.length); //.tickSize(-cfg.height, 0) //.tickFormat("") //.orient("top") var xAxisGroup = plot.append("g") .attr("transform", "translate(" + [0, cfg.height + cfg.xAxisOffset] + ")") .call(xAxis) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-65)"); var xLabel = plot.append("g") .append("text") .attr("class", "axis-label") .attr("text-anchor", "middle") .attr("transform", "translate(" + [cfg.width / 2, cfg.height + 100] +")") .text(cfg.xLabel); xAxisGroup.select(".domain").style("opacity", cfg.domainOpacity); var yAxis = d3.axisLeft(y.nice()); var yAxisGroup = plot.append("g") .attr("transform", "translate(" + [-cfg.yAxisOffset, 0] + ")") .call(yAxis); yAxisGroup.select(".domain").style("opacity", cfg.domainOpacity); plot.append("g") .attr("class", cfg.drawingName); // var gridLinesX = plot.append("g") // .selectAll("line") // .data(x.ticks(cfg.xTicks).slice(1, -1)) // .enter().append("line") // .attr("class", "grid-line") // .attr("x1", d => x(d)) // .attr("y1", d => 0) // .attr("x2", d => x(d)) // .attr("y2", d => cfg.height); // var gridLinesY = plot.append("g") // .selectAll("line") // .data(y.ticks(cfg.yTicks).slice(1, -1)) // .enter().append("line") // .attr("class", "grid-line") // .attr("x1", d => 0) // .attr("y1", d => y(d)) // .attr("x2", d => cfg.width) // .attr("y2", d => y(d)); //addDots(dataset, plot, cfg, x, y, r, xAcc, yAcc, rAcc); // plot.append("g") return plot; } // function showLabel(d) { // var coords = [d3.event.clientX, d3.event.clientY]; // var top = coords[1] + 30, // left = coords[0] - 50; // div.transition() // .duration(200) // .style("opacity", 1); // div.html("" + d.name + "
" + // "Students: " + uniLookup[d.name].students + "
" + // "Staff: " + uniLookup[d.name].nonAcademicStaff) // .style("top", top + "px") // .style("left", left + "px"); // } // function moveLabel() { // var coords = [d3.event.clientX, d3.event.clientY]; // var top = coords[1] + 30, // left = coords[0] - 50; // div.style("top", top + "px") // .style("left", left + "px"); // } // function hideLabel(d) { // div.transition() // .duration(200) // .style("opacity", 0); // } return Object.assign(svg.node(), { update(newData) { //console.log("update is called"); addDots(newData, plot1, config1, xScale, y1Scale, r1Scale, x1Accessor, y1Accessor, r1Accessor, div); addDots(newData, plot2, config2, xScale, y2Scale, r1Scale, x2Accessor, y2Accessor, r1Accessor, div); } }); }3e:Tf76,function addDots(dataset, plot, cfg, x, y, r, xAcc, yAcc, rAcc, div) { //console.log(plot.selectAll(".drawingArea")); const t = plot.transition() .duration(750); plot .select("."+cfg.drawingName) .selectAll("circle") .data(dataset, d => d.StartTime.getTime() + d.SrcAddr + d.Sport + d.Dport + d.DstAddr) // .join("circle") // .attr("class", function(d) { // let startTime = d.StartTime.getTime() // return cfg.dotClassName +" _"+ startTime + "_" + d.SrcAddr + "_" + d.Sport +"_" + d.Dport +"_" + d.DstAddr // }) // .attr("cx", function(d, i) { // if (Math.random < 0.5) { // return x(xAcc(d)) - (Math.random() * x.step()); // } else { // return x(xAcc(d)) + (Math.random() * x.step()); // } // }) // .attr("cy", d => y(yAcc(d))) // .attr("r", d => 0) // .call(enter => enter.transition(t) // .attr("r", d => r(rAcc(d))) // ) // .on("mouseover", function(event, d) { // let startTime = d.StartTime.getTime() // let className = "_" + startTime +"_" + d.SrcAddr +"_" + d.Sport +"_" + d.Dport +"_" + d.DstAddr; // d3.selectAll("circle." + className) // .transition() // .style("stroke-width", 2.5) // .style("stroke", "black"); // showLabel(event, d, div); // }) // .on("mouseout", function(event, d) { // let startTime = "_" + d.StartTime.getTime() // let className = startTime +"_" + d.SrcAddr +"_" + d.Sport +"_" + d.Dport +"_" + d.DstAddr; // d3.selectAll("circle." + className) // .transition() // .style("stroke-width", 0) // .style("stroke", "none"); // hideLabel(div); // }) .join( enter => enter .append("circle") .attr("class", function(d) { let startTime = d.StartTime.getTime() return cfg.dotClassName +" _"+ startTime + "_" + d.SrcAddr + "_" + d.Sport +"_" + d.Dport +"_" + d.DstAddr }) .attr("cx", function(d, i) { return x(xAcc(d)) // if (Math.random < 0.5) { // return x(xAcc(d)) - (Math.random() * x.step()); // } else { // return x(xAcc(d)) + (Math.random() * x.step()); // } }) .attr("cy", d => y(yAcc(d))) .attr("r", 0) .call(enter => enter.transition(d3.transition().duration(750)) .attr("r", d => r(rAcc(d))) .attr("fill", cfg.fill) ) .on("mouseover", function(event, d) { let startTime = d.StartTime.getTime(); let className = "_" + startTime +"_" + d.SrcAddr +"_" + d.Sport +"_" + d.Dport +"_" + d.DstAddr; d3.selectAll("circle." + className) .transition() .style("stroke-width", 2.5) .style("stroke", "black"); showLabel(event, d, div); }) .on("mouseout", function(event, d) { let startTime = "_" + d.StartTime.getTime(); let className = startTime +"_" + d.SrcAddr +"_" + d.Sport +"_" + d.Dport +"_" + d.DstAddr; d3.selectAll("circle." + className) .transition() .style("stroke-width", 0) .style("stroke", "none"); hideLabel(div); }).selection(), //.on("mousemove", moveLabel) update => update .attr("fill","yellow") .selection(), exit => exit .call(exit => exit.transition(d3.transition().duration(750)) .attr("r", 0) .attr("fill", "black") .remove() ) ) }3f:[{"id":"7c37138073d3cc8777bad6df49c51bf04c9759055ebf7f611282488e1157f111888fdf29a29cd0593b8f72e39d4306e40e84746e3f515d87ad2206d89bb783c3","href":"https://static.observableusercontent.com/files/7c37138073d3cc8777bad6df49c51bf04c9759055ebf7f611282488e1157f111888fdf29a29cd0593b8f72e39d4306e40e84746e3f515d87ad2206d89bb783c3","name":"radiflow_source.json","type":"application/json","lastModified":1646316596141.804,"size":128},{"id":"835eff4af39b9c233770c3f281f2ce17dea9499acd526c6b70c8a0dbf6cd4b2da728827a934c6da6d7c1101c5d38dc2d20e7aa6384e57365dcf2d4c8dc642c1b","href":"https://static.observableusercontent.com/files/835eff4af39b9c233770c3f281f2ce17dea9499acd526c6b70c8a0dbf6cd4b2da728827a934c6da6d7c1101c5d38dc2d20e7aa6384e57365dcf2d4c8dc642c1b","name":"ipdict_radiflow.json","type":"application/json","lastModified":1646310401160.077,"size":585},{"id":"19daf4e6f73c179b413dbe26d5675b48bff77902df9836bbff1b3fb661c41c1dbe2032492b38b3ab492b6fe0fb3982d64a9f4d8949786a8071f601fa588fa156","href":"https://static.observableusercontent.com/files/19daf4e6f73c179b413dbe26d5675b48bff77902df9836bbff1b3fb661c41c1dbe2032492b38b3ab492b6fe0fb3982d64a9f4d8949786a8071f601fa588fa156","name":"radiflow_data_full_time_normal.csv","type":"text/csv","lastModified":1645713090885.188,"size":2694583}] 38:{"id":"fcf12d28872e81fb","slug":"network-data-visualisation-for-radiflow-normal-data","title":"Network Data Visualisation for Radiflow Normal Data","thumbnail":"9f4bc682a496dde84765be4052126fb58aa5a3cc0e59579498a82a88a9501baf","access_level":"public","create_time":"$D2022-02-21T09:55:48.097Z","update_time":"$D2022-09-29T18:49:36.912Z","view_time":null,"first_public_time":"$D2022-09-29T18:44:49.585Z","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":760,"publish_version":760,"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 for Radiflow Normal Data","cells":[{"id":0,"value":"# Network Data Visualisation for Radiflow Normal Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"The first visualisation will contain an overview of the communications between devices. This allows the user to get a general sense of whats happening on the network. Clicking on these will provide more details regarding the communications occuring on the device","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":754,"value":"## For Parallel Coordinates Plot, please use the following link:\nhttps://observablehq.com/@matthewnunes/parallel-coordinates-plot/2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"normal_data = FileAttachment(\"radiflow_data_full_time_normal.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":32,"value":"Object.keys(normal_data[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"ipaddress_text = FileAttachment(\"ipdict_radiflow.json\").text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"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":698,"value":"ip_arr = Object.entries(ipaddress_map)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"ipaddress_map_reversed = new Map(ip_arr.map(function(val){\n return [val[1], val[0]]\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"used_addresses = FileAttachment(\"radiflow_source.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"normal_data.forEach(function(d, index, arr){\n d.StartTime = new Date(d.StartTime.split(\"-\")[2].split(\" \")[0], d.StartTime.split(\"-\")[1], d.StartTime.split(\"-\")[0], d.StartTime.split(\" \")[1].split(\":\")[0], d.StartTime.split(\" \")[1].split(\":\")[1], d.StartTime.split(\" \")[1].split(\":\")[2].split(\".\")[0])\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"test = normal_data","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"function initialise() {\n filter_data(normal_data[0][\"StartTime\"])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"time_array = test.map(d => d.StartTime)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"time_set = time_array.reduce(function(accumulator, currentValue) {\n for (var ind = 0; ind < accumulator.length; ind++) {\n if (accumulator[ind].getTime() === currentValue.getTime()) {\n return accumulator;\n }\n }\n accumulator.push(currentValue);\n return accumulator;\n \n}, []);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"slider().render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"function slider() {\n return Object.assign(d3.sliderHorizontal()\n .min(d3.min(time_array))\n .max(d3.max(time_array))\n .step(1000*60 * 10)\n .width(width)\n .displayValue(false)\n .tickValues(time_set)\n //.on('start', initialise)\n .on('end', filter_data), {\n render() {\n return d3.create(\"svg\")\n .attr(\"viewBox\", [-20, -10, width + 40, 53])\n .call(this)\n .node();\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"function filter_data(date_value) {\n var dataToShow = normal_data.filter(function(val, index, array){\n return val.StartTime.getTime() === date_value.getTime();\n });\n mySVG.update(dataToShow);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"mySVG = drawChart()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"function showLabel(event, d, div) {\n //console.log(d);\n var coords = [event.clientX, event.clientY];\n var top = coords[1] + 30,\n left = coords[0] - 50;\n\n div.transition()\n .duration(200)\n .style(\"opacity\", 1);\n\n div.html(\"Source Port: \" + d.Sport + \"
\"\n + \"Destination Port: \" + d.Dport)\n .style(\"top\", top + \"px\")\n .style(\"left\", left + \"px\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"y1Scale = d3.scaleLinear()\n .domain(d3.extent(normal_data, d => d.Sport));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"y2Scale = d3.scaleLinear()\n .domain(d3.extent(normal_data, d => d.Dport));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"r1Scale = d3.scaleLinear()\n .domain(d3.extent(normal_data, d=>d.SrcBytes))\n .range([5, 15])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"r2Scale = d3.scaleLinear()\n .domain(d3.extent(normal_data, d=>d.DstBytes))\n .range([5, 15])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"function hideLabel(div) {\n div.transition()\n .duration(200)\n .style(\"opacity\", 0);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"d3 = require('d3-selection', 'd3-simple-slider', 'd3-scale', 'd3-array', 'd3-axis', 'd3-transition')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3f","stdlib":"1"}} 33:null