2b:null 2c:["$","title",null,{"children":"A foray into D3 using an intrusion dataset. | Maysam Asafiri | Observable"}] 31:Tf66,# A foray into D3 using an intrusion dataset.

One thing I often struggled with, was the rigid nature of tools such as Power Bi and Excel. The streamline nature of the app makes it difficult to try tell stories in a more tailored and compelling way, altering dimensions of a graph, the texture and even the palette lead to issues that were fixable if there had been a means of controlling the output more. Showing it to others also became an issue, not everyone had the same apps, PDFs were ineffective in capturing the layout and accessibility suffered. There was also the matter of handling the data from start to finish in these applications, it is fine for small datasets, but the responsiveness declines substantially as the amount of data to preview and process increased. My preferred method is to separate the ETL process from the visualisation creation as it makes it easier to debug as well as optimise speed, given this, I wanted to find a potential alternative

D3 looked promising, it appeared to have the attributes I required. D3 is fast, responsive, all the elements are malleable and data connectors or data loaders can work across a variety of mediums and languages. It can be shared as a notebook or an app and can be built for online and offline use, the setup is also straightforward, however I had never actually written java script specifically, so I thought I would keep it simple at first and do a sort of test run.

## The duality of network packets and the shapes they take. This is not an analysis in a strict sense. This is not here to make any grandiose claims or to draw conclusions. Rather, this is more of a learning experience using the Observable framework and D3. Feel free to play with the buttons and draw your own conclusions based on the relationships formed. ## The first main iteration of the dataset

This specific graph I created is not anything particularly special, it was made to be more familiar with the Framework and JavaScript. D3 has many templates that are ready to go off the shelf, however I was curious as to what could be done in the context of a canvas, The reason is the ability to create custom shapes and animations for storytelling, offering full control over every individual object. Now I do need to note, D3 is not something with a fast turnaround, the code in the notebook is below and you can see that to get it to this stage took many lines (although it would take much less if everything was not being drawn in a canvas). It took some trial and error and eventually I was able to create something crude. It was fun to work with and I can see the potential

## V2 alteration plans

- More accessible colour palette - Distinct shapes for each browser to add a secondary element - Potentially I could overlay the shape of the browser icon, I imagine with the size of the objects it would be hard to determine but it could also be fun! - Adjust the typography to be easier to read.

## An even weirder idea

We could replace the graph entirely with packets that move from a starting point to an endpoint. It would be a fun way to play a guessing game to see if the packets you track turn out to be malicious or not. - Size dictates the size of the packet - Duration dictates the speed from left to right - Trust score to dictate position on the x axis - When the packet stops moving, we see whether it is malicious or not, it will be unknown until the end

## Conclusion

There is something magical about D3, what it trades in development speed it gives back in raw interaction and customisation. It gives the opportunity to craft something that is fine tuned for the user, it is not a be all end all replacement. Knowing when to keep it simple and when to create something more bespoke is important for delivering the right solution or analysis, in saying that this is a tool I am excited to add to the toolbag.

32:T10ce,canvas22 = { const width = 1000; const height = 800; const margin = { top: 40, right: 80, bottom: 100, left: 150 }; const context = DOM.context2d(width, height); // Set background context.fillStyle = "hsl(216deg 100% 13%)"; context.fillRect(0, 0, width, height); // Create a color scale for unique browser types const uniqueBrowsers = [...new Set(data.map(d => d.browser_type))]; const colorScale = d3.scaleOrdinal() .domain(uniqueBrowsers) .range(d3.schemeCategory10); // Create scales for axes const xScale = d3.scaleLinear() .domain([0, Math.max(...data.map(d => d.network_packet_size))]) .range([margin.left, width - margin.right]); const yScale = d3.scaleLinear() .domain([0, 100]) // Percentage scale .range([height - margin.bottom, margin.top]); // Draw X-axis context.beginPath(); context.strokeStyle = "white"; context.lineWidth = 1; context.moveTo(margin.left, height - margin.bottom); context.lineTo(width - margin.right, height - margin.bottom); context.stroke(); // Draw Y-axis context.beginPath(); context.moveTo(margin.left, margin.top); context.lineTo(margin.left, height - margin.bottom); context.stroke(); // Add X-axis ticks and labels const xTicks = xScale.ticks(10); context.textAlign = "center"; context.textBaseline = "top"; context.fillStyle = "white"; context.font = "20px Verdana"; xTicks.forEach(tick => { const x = xScale(tick); context.beginPath(); context.moveTo(x, height - margin.bottom); context.lineTo(x, height - margin.bottom + 5); context.stroke(); context.fillText(tick, x, height - margin.bottom + 10); }); // Add Y-axis ticks and labels with percentage const yTicks = yScale.ticks(10); context.textAlign = "right"; context.textBaseline = "middle"; yTicks.forEach(tick => { const y = yScale(tick); context.beginPath(); context.moveTo(margin.left - 5, y); context.lineTo(margin.left, y); context.stroke(); context.fillText(`${tick}%`, margin.left - 10, y); }); // Add axis labels context.save(); context.fillStyle = "white"; context.font = "18px Verdana"; // X-axis label context.textAlign = "center"; context.fillText("Network Packet Size", width/2, height - 30); // Y-axis label context.save(); context.translate(45, height/2); context.rotate(-Math.PI/2); context.textAlign = "center"; context.fillText("Chance of IP maliciousness (%)", 0, 0); context.restore(); // Transform canvas for data points context.save(); context.translate(0, height); context.scale(1, -1); // Process and draw data points data.forEach(point => { // X coordinate calculation const x = xScale(point.network_packet_size); // Calculate trust score as percentage (normalized to 0-100 range) const trustScore = (point.ip_reputation_score * 100); // Convert to percentage const y = height - yScale(trustScore); const baseColor = d3.color(colorScale(point.browser_type)); // Only draw if the browser is selected if (browser_selection.includes(point.browser_type)) { if (point.attack_detected == "1") { // Draw X with attack toggle control baseColor.opacity = (toggle_attacked === "Show Malicious" || toggle_attacked === "Show Both") ? 0.8 : 0; context.strokeStyle = baseColor; context.lineWidth = use_dynamic_width.includes("Dynamic") ? point.session_duration/100 : 2; const size = 5; context.beginPath(); context.moveTo(x - size, y - size); context.lineTo(x + size, y + size); context.stroke(); context.beginPath(); context.moveTo(x + size, y - size); context.lineTo(x - size, y + size); context.stroke(); } else { // Draw circle with attack toggle control baseColor.opacity = (toggle_attacked === "Show Normal" || toggle_attacked === "Show Both") ? 0.8 : 0; context.strokeStyle = baseColor; context.lineWidth = use_dynamic_width.includes("Dynamic") ? point.session_duration/100 : 2; context.beginPath(); context.arc(x, y, 5, 0, Math.PI * 2); context.stroke(); } } }); context.restore(); return context.canvas; }33:[{"id":"294ad4bca73928f6a6891f96b0788b2f41541074ba27a6a2d0cd5fe0ee53820f6c2fe67e08fa0e69c3af204b184ff998913c601ec8ff69bcb2b68b75895748b0","href":"https://static.observableusercontent.com/files/294ad4bca73928f6a6891f96b0788b2f41541074ba27a6a2d0cd5fe0ee53820f6c2fe67e08fa0e69c3af204b184ff998913c601ec8ff69bcb2b68b75895748b0","name":"cybersecurity_intrusion_data.csv","type":"text/csv","lastModified":1743048202994.179,"size":725128}] 2f:{"id":"2b86a2d6002f922d","slug":null,"title":"A foray into D3 using an intrusion dataset.","thumbnail":"02db4051fb6e100ed9cec367c9f8ecbe9c4332d2f34f4d3074efb24b352b9d9b","access_level":"unlisted","create_time":"$D2025-03-27T04:03:22.994Z","update_time":"$D2025-04-03T00:48:13.750Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"81a14cb6d367b117","login":"datadesignmaysam","name":"Maysam Asafiri","avatar_url":"https://avatars-next.observableusercontent.com/9786b3ed08c4fd023c90dec0d0a2fdbc60aae946fe2dfd8092696cad5e23f154","tier":"starter_2024"},"version":509,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cacd86049b25e2d2","login":"maysam","name":"Ma","avatar_url":"https://avatars-next.observableusercontent.com/3e1ceaffd4e06feb1d0a97040135364621435747efdd719bb3c58e9a0f18647b","tier":null}],"members":[{"type":"individual","id":"cacd86049b25e2d2","login":"maysam","name":"Ma","avatar_url":"https://avatars-next.observableusercontent.com/3e1ceaffd4e06feb1d0a97040135364621435747efdd719bb3c58e9a0f18647b","tier":null,"role":"editor"},{"type":"team","id":"81a14cb6d367b117","login":"datadesignmaysam","name":"Maysam Asafiri","avatar_url":"https://avatars-next.observableusercontent.com/9786b3ed08c4fd023c90dec0d0a2fdbc60aae946fe2dfd8092696cad5e23f154","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"A foray into D3 using an intrusion dataset.","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":284,"value":"\n

\n ${canvas22}\n ${legend}\n

\n ${viewof toggle_attacked}\n ${viewof browser_selection}\n ${viewof use_dynamic_width}\n

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":385,"value":"\n

Dataset dervied from Dinesh Naveen Kumar Samudrala at Kaggle

dnkumars, 2025, \"Cybersecurity Intrusion Detection Dataset,\" Kaggle. [Online]. Available: https://www.kaggle.com/dnkumars/cybersecurity-intrusion-detection-dataset\n

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"data = FileAttachment(\"cybersecurity_intrusion_data.csv\").csv({typed: true})\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"viewof toggle_attacked = {\n const form = Inputs.radio(\n [\"Show Malicious\", \"Show Normal\", \"Show Both\"],\n {\n label: \"Confirmed behaviour type\",\n value: \"Show Both\"\n }\n );\n \n form.style.fontFamily = \"Verdana\";\n form.style.fontSize = \"16px\";\n \n return form;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"viewof browser_selection = {\n const form = Inputs.checkbox([\n \"Edge\",\n \"Firefox\", \n \"Chrome\",\n \"Safari\",\n \"Unknown\"\n ], {\n label: \"Select Browsers\",\n value: [\"Unknown\"]\n });\n \n form.style.fontFamily = \"Verdana\";\n form.style.fontSize = \"16px\";\n \n return form;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"viewof use_dynamic_width = {\n const form = Inputs.checkbox([\"Dynamic\"], {\n label: \"Session duration scaling enabled\",\n value: false,\n});\n form.style.fontFamily = \"Verdana\";\n form.style.fontSize = \"16px\";\n return form\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"legend = {\n const legendContainer = html`

`;\n \n const uniqueBrowsers = [...new Set(data.map(d => d.browser_type))];\n const colorScale = d3.scaleOrdinal()\n .domain(uniqueBrowsers)\n .range(d3.schemeCategory10);\n \n uniqueBrowsers.forEach(browser => {\n const item = html`

\n ${browser}\n

`;\n legendContainer.appendChild(item);\n });\n \n return legendContainer;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"