md`# Try 3`
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(["norm-", "rect-", "rnd-"], {label: "Icon Style: ", value: "norm-"})
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})`);
// Initialize the links
const link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(dataset.edges)
.enter().append("line")
.style("stroke-width", 0.75 );
// 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 100;});
// 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 - 25)
.attr("y", d => d.y - 25);
}
//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
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
