2b:null 2c:["$","title",null,{"children":"Try 5 | brettforbes | Observable"}] 31:T1f34,myChart={ const div = html`

`; const simulation = forceSimulation(width, height); var tooltip = d3.select("body") .append("div") .attr("class", "tooltip") .style("opacity", 0); const svg = d3.select(div) .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); //appending little triangles, path object, as arrowhead //The element is used to store graphical objects that will be used at a later time //The element defines the graphic that is to be used for drawing arrowheads or polymarkers on a given , , or element. svg.append('defs').append('marker') .attr("id",'arrowhead') .attr('viewBox','-0 -5 10 10') //the bound of the SVG viewport for the current SVG fragment. defines a coordinate system 10 wide and 10 high starting on (0,-5) .attr('refX',50) // x coordinate for the reference point of the marker. If circle is bigger, this need to be bigger. .attr('refY',0) .attr('orient','auto') .attr('markerWidth',10) .attr('markerHeight',10) .attr('xoverflow','visible') .append('svg:path') .attr('d', 'M 0,-5 L 10 ,0 L 0,5') .attr('fill', '#999') .style('stroke','none'); // Initialize the links const link = svg.selectAll(".links") .data(dataset.edges) .enter() .append("line") .attr("class", "links") .attr("source", (d) => d.source) .attr("target", (d) => d.target) .attr("stroke-width", 0.75) .attr("stroke", "grey") .attr('marker-end','url(#arrowhead)'); //The marker-end attribute defines the arrowhead or polymarker that will be drawn at the final vertex of the given shape. const edgepaths = svg.selectAll(".edgepath") //make path go along with the link provide position for link labels .data(dataset.edges) .enter() .append('path') .attr('class', 'edgepath') .attr('fill-opacity', 0) .attr('stroke-opacity', 0) .attr('id', function (d, i) {return 'edgepath' + i}) .style("pointer-events", "none"); const edgelabels = svg.selectAll(".edgelabel") .data(dataset.edges) .enter() .append('text') .style("pointer-events", "none") .attr('class', 'edgelabel') .attr('id', function (d, i) {return 'edgelabel' + i}) .attr('font-size', 18) .attr('fill', '#aaa'); edgelabels.append('textPath') //To render text along the shape of a , enclose the text in a element that has an href attribute with a reference to the element. .attr('xlink:href', function (d, i) {return '#edgepath' + i}) .style("text-anchor", "middle") .style("pointer-events", "none") .attr("startOffset", "50%") .text(d => d.label); // Initialize the nodes // add hover over effect const node = svg.append("g") .attr("class", "nodes") .selectAll("image") .data(dataset.nodes) .enter().append("image") .attr("xlink:href", function(d) { return (prefix + shape + d.icon + ".svg");}) .attr("width", function(d) { return radius + 5;}) .attr("height", function(d) { return radius + 5;}) .on("mouseover", function(d){d3.select(this) .transition() .duration(350) .attr("width", 70) .attr("height", 70) }) .on("mouseout", function(d){d3.select(this) .transition() .duration(350) .attr("width", function(d) { return radius;}) .attr("height", function(d) { return radius;}) }) .on('mouseover.tooltip', function(d) { tooltip.transition() .duration(300) .style("opacity", .8); tooltip.html("

"+syntaxHighlight(d.original) +"

") .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY + 10) + "px"); }) .on("mouseout.tooltip", function() { tooltip.transition() .duration(100) .style("opacity", 0); }) .on("mousemove", function() { tooltip.style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY + 10) + "px"); }) .call(d3.drag() //sets the event listener for the specified typenames and returns the drag behavior. .on("start", dragstarted) //start - after a new pointer becomes active (on mousedown or touchstart). .on("drag", dragged) //drag - after an active pointer moves (on mousemove or touchmove). .on("end", dragended) //end - after an active pointer becomes inactive (on mouseup, touchend or touchcancel). ); //Listen for tick events to render the nodes as they update in your Canvas or SVG. simulation .nodes(dataset.nodes)//sets the simulation’s nodes to the specified array of objects, initializing their positions and velocities, and then re-initializes any bound forces; .on("tick", ticked);//use simulation.on to listen for tick events as the simulation runs. // After this, Each node must be an object. The following properties are assigned by the simulation: // index - the node’s zero-based index into nodes // x - the node’s current x-position // y - the node’s current y-position // vx - the node’s current x-velocity // vy - the node’s current y-velocity simulation.force("link") .links(dataset.edges) .distance(function() {return 4*radius;}); // This function is run at each iteration of the force algorithm, updating the nodes position (the nodes data array is directly manipulated). function ticked() { link.attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node.attr("x", d => d.x - radius/2) .attr("y", d => d.y - radius/2); edgepaths.attr('d', d => 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y); } //create zoom handler var zoom_handler = d3.zoom() .on("zoom", zoom_actions); //specify what to do when zoom event listener is triggered function zoom_actions(){ svg.attr("transform", d3.event.transform); } //add zoom behaviour to the svg element //same as svg.call(zoom_handler); zoom_handler(svg); //When the drag gesture starts, the targeted node is fixed to the pointer //The simulation is temporarily “heated” during interaction by setting the target alpha to a non-zero value. function dragstarted(d) { if (!d3.event.active) simulation.alphaTarget(0.3).restart();//sets the current target alpha to the specified number in the range [0,1]. d.fy = d.y; //fx - the node’s fixed x-position. Original is null. d.fx = d.x; //fy - the node’s fixed y-position. Original is null. } //When the drag gesture starts, the targeted node is fixed to the pointer function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } //the targeted node is released when the gesture ends function dragended(d) { if (!d3.event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; //console.log("dataset after dragged is ...",dataset); } return div }32:[{"id":"67efbe150f0ed1c3007c901a0cf0a80be3fe6b476a18740047c433256d651b7ee4671a86d55120d62dc9b6091e944fcfbc24feeb0c1f2febe778bd438d473814","href":"https://static.observableusercontent.com/files/67efbe150f0ed1c3007c901a0cf0a80be3fe6b476a18740047c433256d651b7ee4671a86d55120d62dc9b6091e944fcfbc24feeb0c1f2febe778bd438d473814","name":"n_and_e.json","type":"application/json","lastModified":1694754942547.167,"size":104798}] 2f:{"id":"d38d0ac91b4ba30d","slug":null,"title":"Try 5","thumbnail":"4ae8476da91d4acf30786c0b0625598de33b39ea6be0d9d2cb9dbf89d31af746","access_level":"public","create_time":"$D2023-09-15T05:15:42.547Z","update_time":"$D2024-06-01T02:01:11.661Z","view_time":null,"first_public_time":"$D2023-09-15T05:15:42.547Z","has_unpublished_edits":null,"fork":{"id":"d183c4e3b796e91a","slug":null,"title":"Try 4","owner":{"id":"f846f459b144e893","login":"brettforbes","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"f846f459b144e893","login":"brettforbes","name":"","avatar_url":"https://avatars-next.observableusercontent.com/90abd4233f342d3bde898a6f28cf0f1a64652b13845939fedb9e12eda77f7bd0","tier":"starter_2024"},"version":134,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e3ae8b6a8e4f693b","login":"brettforbes","name":"","avatar_url":"https://avatars-next.observableusercontent.com/90abd4233f342d3bde898a6f28cf0f1a64652b13845939fedb9e12eda77f7bd0","tier":null}],"members":[{"type":"individual","id":"e3ae8b6a8e4f693b","login":"brettforbes","name":"","avatar_url":"https://avatars-next.observableusercontent.com/90abd4233f342d3bde898a6f28cf0f1a64652b13845939fedb9e12eda77f7bd0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Try 5","cells":[{"id":0,"value":"md`# Try 5`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"dataset = FileAttachment(\"n_and_e.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"prefix = \"https://raw.githubusercontent.com/os-threat/images/main/img/\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"viewof shape = Inputs.radio([\"norm-\", \"rect-\", \"rnd-\"], {label: \"Icon Style: \", value: \"rect-\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"margin = ({top: 30, right: 80, bottom: 30, left: 30}); ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"width = 1200","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"radius = 50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"height = 1000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"function syntaxHighlight(json) {\n if (typeof json != 'string') {\n json = JSON.stringify(json, undefined, 2);\n }\n json = json.replace(/&/g, '&').replace(//g, '>');\n return json.replace(/(\"(\\\\u[a-zA-Z0-9]{4}|\\\\[^u]|[^\\\\\"])*\"(\\s*:)?|\\b(true|false|null)\\b|-?\\d+(?:\\.\\d*)?(?:[eE][+\\-]?\\d+)?)/g, function (match) {\n var cls = 'number';\n if (/^\"/.test(match)) {\n if (/:$/.test(match)) {\n cls = 'key';\n } else {\n cls = 'string';\n }\n } else if (/true|false/.test(match)) {\n cls = 'boolean';\n } else if (/null/.test(match)) {\n cls = 'null';\n }\n return '' + match + '';\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"//create a simulation for an array of nodes, and compose the desired forces.\nfunction forceSimulation(width, height) {\n return d3.forceSimulation()\n .force(\"link\", d3.forceLink() // This force provides links between nodes\n .id(d => d.id) // This sets the node id accessor to the specified function. If not specified, will default to the index of a node.\n ) \n .force(\"charge\", d3.forceManyBody().strength(-500)) // This adds repulsion (if it's negative) between nodes. \n .force(\"center\", d3.forceCenter(width / 2, height / 2)); // This force attracts nodes to the center of the svg area\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"