chart = { // Specify the dimensions of the chart. const width = 1024; const height =1024; // Specify the color scale. const color = d3.scaleOrdinal(d3.schemeCategory10); // The force simulation mutates links and nodes, so create a copy // so that re-evaluating this cell produces the same result. const links2 = links.map(d => ({...d})); const nodes2 = nodes.map(d => ({...d})); // Create a simulation with several forces. const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id).distance(d => d.value * 400)) .force("center", d3.forceCenter(width / 2, height / 2)) .force("collision", d3.forceCollide().radius(d => 5)) .on("tick", ticked); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // Add a line for each link, and a circle for each node. const link = svg.append("g") .attr("stroke-opacity", .25) .attr("stroke-width", 1.0) .selectAll() .data(links) .join("line") .attr("stroke", d => d.color); const node = svg.append("g") .attr("stroke", "#000") .attr("stroke-width", .75) .selectAll() .data(nodes) .join("circle") .attr("r", d => d3.scaleLinear([1, 10000], [3, 20])(d.size * 200)) .attr("fill", d => color(d.group)) node.append('text') .attr('x', 50) .attr('y', 50) .attr('fill', 'white') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('font-family', 'sans-serif') .text(d => d.id); // Add event to show popup when hovering on a node let tooltip = d3.select("body").append("div") .attr("class", "network-graph") .style("position", "absolute") .style("text-align", "left") .style("padding", "0.5rem") .style("background", "#ffffff") .style("color", "#313639") .style("pointer-events", "none") .style("font-size", "0.8rem") .style("font-family", "Arial, Helvetica, sans-serif") .style("box-shadow", "rgba(100, 100, 111, 0.2) 0px 7px 29px 0px") .style("border", "solid") .style("border-width", "1px") .style("border-radius", "5px") node .on('mouseover', function (d, i) { d3.select(this).transition() .duration('50') .attr('opacity', '0.8'); tooltip .transition() .duration(50) .style("opacity",0.9) tooltip .html("ID: " + i.id + "
Name: " + i.name + "
Size: " + i.size) .style("left", (d.pageX + 10) + "px") .style("top", (d.pageY - 15) + "px"); }) .on('mouseout', function (d, i) { d3.select(this).transition() .duration('50') .attr('opacity', '1'); tooltip.transition() .duration('50') .style("opacity",0); }); link .on('mouseover', function (d, i) { d3.select(this).transition() .duration('50') .attr('opacity', '0.8'); tooltip .transition() .duration(50) .style("opacity",0.9) tooltip .html("Source: " + i.source + "
Target: " + i.target + "
HI: " + i.value) .style("left", (d.pageX + 10) + "px") .style("top", (d.pageY - 15) + "px"); }) .on('mouseout', function (d, i) { d3.select(this).transition() .duration('50') .attr('opacity', '1'); tooltip.transition() .duration('50') .style("opacity",0); }); // Add a drag behavior. node.call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); // Set the position attributes of links and nodes each time the simulation ticks. function ticked() { link .attr("x1", function (d) { checkBounds(d.source); return d.source.x; }) .attr("y1", function (d) { return d.source.y; }) .attr("x2", function (d) { checkBounds(d.target); return d.target.x; }) .attr("y2", function (d) { return d.target.y; }); node .attr("cx", function (d) { checkBounds(d); return(d.x); }) .attr("cy", function (d) { checkBounds(d); return(d.y); }); }; // Check bounds function checkBounds(d){ if (d.x < 0) d.x = 0; if (d.x > width) d.x = width; if (d.y < 0) d.y = 0; if (d.y > height) d.y = height; } // Reheat the simulation when drag starts, and fix the subject position. function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } // Update the subject (dragged node) position during drag. function dragged(event) { event.subject.fx = event.x; event.subject.fy = event.y; } // Restore the target alpha so the simulation cools after dragging ends. // Unfix the subject position now that it’s no longer being dragged. function dragended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = null; event.subject.fy = null; } // When this cell is re-run, stop the previous simulation. (This doesn’t // really matter since the target alpha is zero and the simulation will // stop naturally, but it’s a good practice.) invalidation.then(() => simulation.stop()); // Add Title svg.append("text") .attr("class", "chart-title") .attr("x", "5%") .attr("y", "5%") .attr("text-anchor", "start") .style('font-size', '20px') .style('font-weight', 'bold') .style('text-align', 'left') .style('position', 'absolute') .style('padding', '0.5rem') .style('color', '#313639') .style('font-family', 'Arial, Helvetica, sans-serif') .text("Common Upstreams"); return svg.node(); }