2d:null 2e:["$","title",null,{"children":"War Department with at least 10 degree, network with zoom, connected nodes on click and tooltip | Maeve Kane | Observable"}] 33:Te9b,chart = { const links = json.links.map(d => Object.create(d)); const nodes = json.nodes.map(d => Object.create(d)); 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() { d3.selectAll('.link').style('opacity', '1'); d3.selectAll('.node').style('opacity', '1'); }); var container = svg.append('g'); 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. let toggle = 0; var linkedByIndex = {}; // keep the clicked node in linkedByIndex for (let i = 0; i < nodes.length; i++) { linkedByIndex[i + "," + i] = 1; } // Get the neighboring nodes and put them in 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.index + ',' + b.index]; } function connectedNodes() { if (toggle == 0) { let d = d3.select(this).node().__data__; var neighbors = []; node.style("opacity", function(o) { neighboring(d, o) || neighboring(o, d) ? neighbors.push(o.id) : null; return neighboring(d, o) || neighboring(o, d) ? 1 : 0.15; }); link.style("opacity", function(o) { return o.target == d || o.source == d ? 1 : 0.15; }); var contents = []; neighbors.forEach(function(item) { contents.push("

" + item + "

"); }); console.log(contents); return tooltip.html( // style the contents of your tooltip here. This will replace the hover tooltip contents in tooltip below "

" + d.id + "

" + contents.join("") + "" ); toggle = 1; } else { link.style("opacity", 1); node.style("opacity", 1); toggle = 0; } } 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") .attr('r', function(d, i) { return degreeSize(d.degree); }) .attr("fill", color) .attr('class', 'node') .on("mouseover", (event, d) => tooltip_in(event, d)) .on("mouseout", tooltip_out) .on('click', connectedNodes) .call(drag(simulation)); node = nodeEnter.merge(node); 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; }); } } }); }34:[{"id":"c2cc302ef9fd1ebe2ccb840f9b473dea4df29057b9f4747c6dabba2c906eeed7be5c499ca9be2510e9b0f20e3cbd83a7f760b5c70091c5060cd84e3ef0c11bbb","href":"https://static.observableusercontent.com/files/c2cc302ef9fd1ebe2ccb840f9b473dea4df29057b9f4747c6dabba2c906eeed7be5c499ca9be2510e9b0f20e3cbd83a7f760b5c70091c5060cd84e3ef0c11bbb","name":"graph_over_10.json","type":"application/json","lastModified":1619880210519.233,"size":52050}] 31:{"id":"0aacc6b772f81c52","slug":"untitled","title":"War Department with at least 10 degree, network with zoom, connected nodes on click and tooltip","thumbnail":"622fbcf2bf9c0c0d2f42e1eba2c0ac12a14f81a0040183b7128ddf6c02945936","access_level":"public","create_time":"$D2021-05-01T14:40:54.106Z","update_time":"$D2021-05-01T15:20:15.565Z","view_time":null,"first_public_time":"$D2021-05-01T14:45:55.274Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"aa9e7a8a29012c93","login":"mkane2","name":"Maeve Kane","avatar_url":"https://avatars-next.observableusercontent.com/10f27e44a96d5e36afe9f72cf1af8b5efa3b0f668929d6850e6e7d05867b630c","tier":"starter_2024"},"version":53,"publish_version":53,"role":null,"authored":false,"authors":[{"type":"individual","id":"c33c0c6945323f32","login":"mkane2","name":"Maeve Kane","avatar_url":"https://avatars-next.observableusercontent.com/10f27e44a96d5e36afe9f72cf1af8b5efa3b0f668929d6850e6e7d05867b630c","tier":null}],"members":[{"type":"individual","id":"c33c0c6945323f32","login":"mkane2","name":"Maeve Kane","avatar_url":"https://avatars-next.observableusercontent.com/10f27e44a96d5e36afe9f72cf1af8b5efa3b0f668929d6850e6e7d05867b630c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"e958648df2406e1f","slug":"network-examples","title":"Network examples","owner":{"id":"aa9e7a8a29012c93","login":"mkane2","name":"Maeve Kane"}},"type":"notebook","body":{"title":"War Department with at least 10 degree, network with zoom, connected nodes on click and tooltip","cells":[{"id":0,"value":"md`# War Department with at least 10 degree, network with zoom, connected nodes on click and tooltip\n\nBased on JR Ladd's [Marvel network example](https://observablehq.com/@jrladd/marvel-network)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`## Define tooltip`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .style(\"position\", \"absolute\") \n .style(\"visibility\", \"hidden\") \n .style(\"background-color\", \"white\")\n .attr(\"class\", \"tooltip\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"tooltip_in = function(event, d) { \n return tooltip\n .html(\"

\" + d.id + \"

\")\n .style(\"visibility\", \"visible\") \n .style(\"top\", event.pageY + \"px\")\n .style(\"left\", event.pageX + \"px\"); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"tooltip_out = function() {\n return tooltip\n .transition()\n .duration(50) \n .style(\"visibility\", \"hidden\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"\nhtml`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"md`## Size, color, and height utilities`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"degreeSize = d3.scaleLinear()\n .domain([d3.min(json.nodes, function(d) {return d.degree; }),d3.max(json.nodes, function(d) {return d.degree; })])\n .range([5,25]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"color = {\n const scale = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, 12));\n return d => scale(d.modularity);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"height = 900","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`## Define drag, zoom, and network forces`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"drag = simulation => {\n \n function dragstarted(event, d) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n\n function dragged(event, d) {\n d.fx = event.x;\n d.fy = event.y;\n }\n\n function dragended(event, d) {\n if (!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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"zoom = container => {\n function zoomed(event, d) {\n container.attr(\"transform\", \"translate(\" + event.transform.x + \", \" + event.transform.y + \") scale(\" + event.transform.k + \")\");\n }\n \n return d3.zoom().on('zoom', zoomed)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"simulation = d3.forceSimulation()\n .force(\"link\", d3.forceLink().id(function(d) { return d.id; }))\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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"md`## Get the data and draw the chart`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"json = FileAttachment(\"graph_over_10.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"chart.update(json.nodes,json.links)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"