chart = { // Specify the dimensions of the chart. const width = 1024; const height = 512; // 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 links = data.links.map(d => ({...d})); const nodes = data.nodes.map(d => ({...d})); // Create a simulation with several forces. const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody().strength(-2)) // .force("x", d3.forceX(width / 2, height / 2)) // .force("y", d3.forceY(width / 2, height / 2)) .force("center", d3.forceCenter(width / 2, height / 2)) .force("collision", d3.forceCollide().radius(d => 20)) .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", "#999") .attr("stroke-opacity", 0.3) .selectAll() .data(links) .join("line") .attr("stroke-width", d => Math.sqrt(d.value)); const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll() .data(nodes) .join("circle") .attr("r", d => d3.scaleLog([1,500], [3, 20])(d.size)) // .attr("r", d => (17.0/455.0)*(d.size - 2) + 3) .attr("fill", d => color(d.group)); // 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") 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("Name: " + i.name + "
URL: " + i.url + "
Community: " + i.group + "
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); }); // 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(); }