2e:null 2f:["$","title",null,{"children":"whole network Debtors, network with zoom, connected nodes on click and tooltip | Maeve Kane | Observable"}] 34:Tf3a,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.betweenness); }) .attr("fill", function(d, i) { if (count(d.type) >= 100) { return scale(d.type); } else { return "gray"; } }) .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; }); } } }); }35:[{"id":"033ab450cf8a4eaee863ea1df8f95aabe5ae080ea79602edf59a47483071aab4774b8a005ab208937e7cb89cb2be53586b0ad63c7fb8901237f89b8e627ccf69","href":"https://static.observableusercontent.com/files/033ab450cf8a4eaee863ea1df8f95aabe5ae080ea79602edf59a47483071aab4774b8a005ab208937e7cb89cb2be53586b0ad63c7fb8901237f89b8e627ccf69","name":"05-03graph.json","type":"application/json","lastModified":1620138868602.162,"size":494070}] 32:{"id":"8e40277068be336c","slug":"whole-network-debtors-network-with-zoom-connected-nodes-on","title":"whole network Debtors, network with zoom, connected nodes on click and tooltip","thumbnail":"9a28712ebdbfb567f00063a37973965fe0c24384f19fc8925bba56e2ec0710c3","access_level":"public","create_time":"$D2021-05-04T14:34:28.602Z","update_time":"$D2021-05-08T01:27:27.980Z","view_time":null,"first_public_time":"$D2021-05-04T16:58:07.089Z","has_unpublished_edits":null,"fork":{"id":"95693ae64fa0bee8","slug":"whole-network-debtors-network-with-zoom-connected-nodes-on","title":"whole network Debtors, network with zoom, connected nodes on click and tooltip","owner":{"id":"3609673d6fecdc65","login":"elisabethmtatum","name":""}},"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":231,"publish_version":231,"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":1,"collection":null,"type":"notebook","body":{"title":"whole network Debtors, network with zoom, connected nodes on click and tooltip","cells":[{"id":0,"value":"md`# whole network Debtors, 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":"$34","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.full_name + \"
\" + d.type + \"
\" +\"
\" + d.gender + \"
\" + d.occupation + \"
\" + \"
\" + d.location +\"
\" + \"Role in court system: \" + d.court + \"
\" + \"
\"+ \"

\" + d.transactions + \"

\")\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\n .scaleLinear()\n .domain([\n d3.min(json.nodes, function(d) {\n return d.betweenness;\n }),\n d3.max(json.nodes, function(d) {\n return d.betweenness;\n })\n ])\n .range([5, 25])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"check = {\n return d3.rollup(json.nodes, v => v.length, d => d.type);\n // return d => countup(d.modularity);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"count = thing => {\n return json.nodes.filter(function(d) {\n return d.type == thing;\n }).length;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"count_creditors = count(\"Creditor\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"scale = d3.scaleOrdinal(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"color = {\n const scale = d3.scaleOrdinal(\n d3.quantize(d3.interpolateRainbow, modularity_count)\n );\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\n .forceSimulation()\n .force(\n \"link\",\n d3.forceLink().id(function(d) {\n return d.id;\n })\n )\n .force(\n \"charge\",\n d3\n .forceManyBody()\n .strength([-250])\n .distanceMax([500])\n )\n .force(\"center\", d3.forceCenter(width / 2, height / 2))\n .force(\n \"collide\",\n d3.forceCollide().radius(function(d) {\n return degreeSize(d.betweenness);\n })\n )","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(\"05-03graph.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":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"

" + d.id + "

\" + d.full_name + \"\" + d.type + \"\" +\"\" + d.gender + \"\" + d.occupation + \"\" + \"\" + d.location +\"\" + \"Role in court system: \" + d.court + \"\" + \"\"+ \"

\" + d.full_name + \"
\" + d.type + \"
\" +\"
\" + d.gender + \"
\" + d.occupation + \"
\" + \"
\" + d.location +\"
\" + \"Role in court system: \" + d.court + \"
\" + \"
\"+ \"