31:Tbeb,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append('rect') .attr('width', '100%') .attr('height', '100%') .attr('fill', 'white') .on('click', function() { // Restore nodes and links to normal opacity. d3.selectAll('.link').style('stroke-opacity', '0.6'); d3.selectAll('.node').style('opacity', '1'); }); var container = svg.append('g'); // Call zoom for svg container. svg.call(zoom(container)); var link = container.append("g") .attr("class", "links") .selectAll("line"); var node = container.append("g") .attr("class", "nodes") .selectAll("circle"); // Make object of all neighboring nodes. var linkedByIndex = {}; json.links.forEach(function(d) { linkedByIndex[d.source.index + ',' + d.target.index] = 1; linkedByIndex[d.target.index + ',' + d.source.index] = 1; }); // A function to test if two nodes are neighboring. function neighboring(a, b) { return linkedByIndex[a.source.index + ',' + b.source.index]; } return Object.assign(svg.node(), { update(nodes,links) { link = link.data(links, function(d) { return d.source.index + ", " + d.target.index;}); link.exit().remove(); var linkEnter = link.enter().append("line") .attr('class', 'link') .attr('stroke', 'gray'); link = linkEnter.merge(link); node = node.data(nodes); node.exit().remove(); var nodeEnter = node.enter().append("circle") // Use degree centrality from NetworkX in json. .attr('r', function(d, i) { return degreeSize(d.degree); }) // Color by group, a result of modularity calculation in NetworkX. .attr("fill", function(d) { return color(d.group); }) .attr('class', 'node') // On click, toggle ego networks for the selected node. .on('click', function(d, i) { // Ternary operator restyles links and nodes if they are adjacent. d3.selectAll('.link').style('stroke-opacity', function (l) { return l.target == d || l.source == d ? 1 : 0.1; }); d3.selectAll('.node').style('opacity', function (n) { return neighboring(d, n) ? 1 : 0.1; }); d3.select(this).style('opacity', 1); }) .call(drag(simulation)); node = nodeEnter.merge(node); node.append("title") .text(function(d) { return d.name; }); simulation .nodes(nodes) .on("tick", ticked); simulation.force("link") .links(links); simulation.alpha(1).restart(); function ticked() { link .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; }); node .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }); } } }); }32:T86a,md` A demonstration of network code in JavaScript, from JSON to interactive diagram. The code below is a step-by-step walkthrough for creating a force-directed network graph using D3. There are a lot of good tutorials out there already, but they don't always include the tools that most folks would like to have in an interactive network out-of-the-box, e.g clicking nodes to see neighborhoods, filtering edges by weight, searching nodes by name, resizing nodes by centrality, etc. This code includes a lot of those bells and whistles, using a fun dataset from Marvel Comics. **n.b. This demonstration is written in D3v4, and there are number of differences between version 4 and later versions of D3. While the same general principles still apply, this exact code is unlikely to work in later versions without modification.** *Click the panels at the left to expose the JS code for any of the tools that you see.* ## Filtering, Resizing, Searching The graph above is both zoomable and clickable. Clicking on a node will show that node and its neighbors. Mousing over a node will show the character's name as title text. But we can also filter the network by edge weight. The slider above eliminates edges if they have weights below the threshold---in this case that means if a character appears fewer than X times with any other character, then that edge will disappear from the graph. As the slider goes up, you'll see a network that connects just the most frequently co-occurring characters. You can also resize nodes according to three different centrality values. The default is degree, but you can also use betweenness and eigenvector centrality. Finally, so you can find specific characters more easily, there's a search box where you can simply type a character's name. Trying searching for "Scarlet Witch." (Keep in mind: some characters appear more than once in the network, because the same character can exist in different continuities. ## Creating the Graph In order to get the graph displayed above, there are some basic variables and functions we need to add. The first is just an integer that defines the height of the SVG:`33:[{"id":"72011018f9fef15426b3efb5d01d8b85e500284ea8c7d989ef423f3d9ff220b953e6203e4d2f4a91aed33bce97b2e2b8287d568bd30764d83941a508ccf3d2c4","href":"https://static.observableusercontent.com/files/72011018f9fef15426b3efb5d01d8b85e500284ea8c7d989ef423f3d9ff220b953e6203e4d2f4a91aed33bce97b2e2b8287d568bd30764d83941a508ccf3d2c4","name":"marvel.json","type":"application/json","lastModified":1614006868737.361,"size":316077}] 2f:{"title":"Marvel Network","cells":[{"id":0,"value":"md`# Marvel Network`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":" \t// A slider (using only d3 and HTML5) that removes nodes below the input threshold.\nslider = {\n\n let min = d3.min(json.links, function(d) {return d.weight; });\n let max = d3.max(json.links, function(d) {return d.weight; })\n let slider = html`\n Edge Weight Threshold: ${min}\n `;\n let label = slider.querySelector('label');\n let range = slider.querySelector('input');\n range.value = min\n range.oninput = () => {\n let threshold = range.valueAsNumber\n label.innerHTML = `Edge Weight Threshold: ${threshold}`\n let newLinks = json.links.filter(l => l.weight > threshold);\n chart.update(json.nodes,newLinks);\n };\n return slider;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"\t// A dropdown menu with three different centrality measures, calculated in NetworkX.\n\ndropdown = {\n let dropdown = html`\n Size Nodes By:\n `;\n let select = dropdown.querySelector('select');\n let label = dropdown.querySelector('label');\n dropdown.onchange = () => {\n var centrality = select.value;\n var centralitySize = d3.scaleLinear()\n .domain([d3.min(json.nodes, function(d) { return d[centrality]; }), d3.max(json.nodes, function(d) { return d[centrality]; })])\n .range([8,25]);\n d3.selectAll(\".node\").attr(\"r\", d => centralitySize(d[centrality]));\n }\n return dropdown;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"// Create form for search (see function below).\nsearch = {\n let search = html`\n Search by name:\n `;\n let label = search.querySelector('label');\n let input = search.querySelector('input');\n search.onkeyup = () => {\n var term = input.value;\n var selected = d3.selectAll('.node').filter(function (d, i) {\n return d.name.toLowerCase().search(term.toLowerCase()) == -1;\n });\n selected.style('opacity', '0');\n d3.selectAll('.link').attr('stroke-opacity', '0');\n d3.selectAll('.node').transition()\n .duration(5000)\n .style('opacity', '1');\n d3.selectAll('.link').transition().duration(5000).style('stroke-opacity', '0.6');\n }\n return search\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"height=600;","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"md`Next we create a simulation, which defines the forces in our \"force-directed\" graph. This tells us how far apart nodes should be and how the graph should be centered, and it prevents nodes from overlapping.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"simulation = d3.forceSimulation()\n .force(\"link\", d3.forceLink().id(function(d) { return d.index; }))\n .force(\"charge\", d3.forceManyBody().strength([-250]).distanceMax([500]))\n .force(\"center\", d3.forceCenter(width / 2, height / 2))\n .force(\"collide\", d3.forceCollide().radius( function (d) { return degreeSize(d.degree); }));","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"md`D3 also lets us define scales to govern the color and size of our nodes. We'll create an ordinal scale for color and a linear scale for size. The size scale is based on degree, but that scale gets replaced with new ones in the code for the centrality dropdown, above.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":497,"value":"color = d3.scaleOrdinal(d3.schemeCategory20);","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"// Linear scale for degree centrality.\ndegreeSize = d3.scaleLinear()\n .domain([d3.min(json.nodes, function(d) {return d.degree; }),d3.max(json.nodes, function(d) {return d.degree; })])\n .range([8,25]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"md`To make our graph even more interactive, we want to be able to zoom the SVG and drag around individual nodes. We can define drag and zoom functions to do that. These functions are both called in the main chart code, above.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"drag = simulation => {\n \n function dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n\n function dragged(d) {\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n\n function dragended(d) {\n if (!d3.event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"zoom = container => {\n // Zooming function translates the size of the svg container.\n function zoomed() {\n container.attr(\"transform\", \"translate(\" + d3.event.transform.x + \", \" + d3.event.transform.y + \") scale(\" + d3.event.transform.k + \")\");\n }\n \n return d3.zoom().scaleExtent([0.5,3]).on('zoom', zoomed)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"md`Finally, we load the data in from a JSON file and update the chart!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"json = FileAttachment(\"marvel.json\").json();","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"chart.update(json.nodes,json.links)","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"d3 = require(\"d3@4\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}