Try 4 / brettforbes | Observable

md`# Try 4`

dataset = FileAttachment("n_and_e.json").json()

d3 = require('d3@5')

prefix = "https://raw.githubusercontent.com/os-threat/images/main/img/"

viewof shape = Inputs.radio(["rect-", "norm-", "rnd-"], {label: "Icon Style: ", value: "rect-"})

margin = ({top: 30, right: 80, bottom: 30, left: 30});

width = 1200

radius = 50

height = 1000

myChart={

const div = html`<div style='max-width: 900px; overflow-x: auto; padding: 0px; margin: 0px;'></div>`;

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 <defs> element is used to store graphical objects that will be used at a later time

//The <marker> element defines the graphic that is to be used for drawing arrowheads or polymarkers on a given <path>, <line>, <polyline> or <polygon> 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 <path>, enclose the text in a <textPath> element that has an href attribute with a reference to the <path> 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("<pre>"+syntaxHighlight(d.original) +"</pre>")

.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

}

Purpose-built for displays of data