Force-Directed Layout

html = """ Force-Directed Layout """ js = """ let json = `{}`; console.log(json); let graph = JSON.parse(json); // This is adapted from https://bl.ocks.org/mbostock/2675ff61ea5e063ede2b5d63c08020c7 let width = window.innerWidth; let height = d3.select("svg").attr("height"); let svg = d3 .select("svg") .attr("width", width) .call( d3.zoom().on("zoom", () => { svg.attr("transform", d3.event.transform); }) ) .append("g"); let simulation = d3 .forceSimulation() .nodes(graph.nodes) .alphaMin(0.01) .alphaDecay(0.05) .force( "link", d3 .forceLink() .links(graph.links) .id((d) => { return d.id; }) .strength((d) => { return d.weight/1; }) .distance(80) ) .force("charge", d3 .forceManyBody() .strength(d => { return -200 - (d.size/7)**3 - ((d.repulsion || 1) - 1) * 5 }) .distanceMin(10) .distanceMax(250) ) .force( "center", d3.forceCenter(width / 2, height / 2) // .strength(2) ) .force( "collide", d3.forceCollide().radius(d => { return d.radius }) ); setTimeout(() => { simulation.stop(); }, 12000); let linkElements = svg .append("g") .attr("class", "links") .selectAll("line") .data(graph.links) .enter() .append("line") .attr("stroke", (link) => link.color || "#9ecae1") .attr("stroke-opacity", 0.3) .attr("stroke-width", (link) => { let x = link.weight; return 0.5 + (1 / x - x) ** 2 / 12; }); let nodeElements = svg .append("g") .attr("class", "nodes") .selectAll("circle") .data(graph.nodes) .enter() .append("circle") .attr("r", (d) => d.size || 5) .attr("fill", (node) => node.color || "#f06") .call( d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended) ); let textElements = svg .append("g") .attr("class", "labels") .selectAll("text") .data(graph.nodes) .enter() .append("text") .text((node) => node.name) .attr("fill", "hsla(0, 0%, 0%, 0.8)") .style("pointer-events", "none") .attr("font-size", 4) .attr("dx", 6) .attr("dy", 2); nodeElements.append("title").text((d) => { return d.name; }); simulation.on("tick", () => { linkElements .attr("x1", function (d) { return d.source.x; }) .attr("y1", function (d) { return d.source.y; }) .attr("x2", function (d) { return d.target.x; }) .attr("y2", function (d) { return d.target.y; }); nodeElements .attr("cx", function (d) { return d.x; }) .attr("cy", function (d) { return d.y; }); textElements.attr("x", (node) => node.x).attr("y", (node) => node.y); }); function dragstarted(d) { if (!d3.event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; } """