2e:null 2f:["$","title",null,{"children":"Filtered & Court Roles: 1770-1775 Network of Dutchess County Insolvent Debtors and their Respective Creditors & Debtors | elisabethmtatum | Observable"}] 34:Tea0,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", 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; }); } } }); }35:[{"id":"4e9e916a4cf2c3a8cbc55a1f365c5fb0648459d2a0399ddfb032e4a9b12e055c5700a9866c6ac223da487e76cee65a69520f5fa325cf1d87b9d7b47ca982f70c","href":"https://static.observableusercontent.com/files/4e9e916a4cf2c3a8cbc55a1f365c5fb0648459d2a0399ddfb032e4a9b12e055c5700a9866c6ac223da487e76cee65a69520f5fa325cf1d87b9d7b47ca982f70c","name":"05-03filteredgraph@1.json","type":"application/json","lastModified":1620095823858.288,"size":46526},{"id":"242e36131398489ad1b2ece9754ac06a9b9a5761a11f9ee8b961537b1824bb30d883155f9496cb3a4e877a94f048c055af54034acbae06335cd740ccb498dded","href":"https://static.observableusercontent.com/files/242e36131398489ad1b2ece9754ac06a9b9a5761a11f9ee8b961537b1824bb30d883155f9496cb3a4e877a94f048c055af54034acbae06335cd740ccb498dded","name":"05-04filteredgraph.json","type":"application/json","lastModified":1620133794340.477,"size":46289},{"id":"242e36131398489ad1b2ece9754ac06a9b9a5761a11f9ee8b961537b1824bb30d883155f9496cb3a4e877a94f048c055af54034acbae06335cd740ccb498dded","href":"https://static.observableusercontent.com/files/242e36131398489ad1b2ece9754ac06a9b9a5761a11f9ee8b961537b1824bb30d883155f9496cb3a4e877a94f048c055af54034acbae06335cd740ccb498dded","name":"05-04filteredgraph@1.json","type":"application/json","lastModified":1620409791513.359,"size":46289},{"id":"2e1493e6ab6e18e919b488496ff4a5cb9a881b06554094c5af6757505b1741a0f971036e297b90dc50b2f2a97aed88a832302d3047941d984acd4f9fa56caa9b","href":"https://static.observableusercontent.com/files/2e1493e6ab6e18e919b488496ff4a5cb9a881b06554094c5af6757505b1741a0f971036e297b90dc50b2f2a97aed88a832302d3047941d984acd4f9fa56caa9b","name":"5-14filteredgraph.json","type":"application/json","lastModified":1621003788170.794,"size":46291}] 32:{"id":"ae3e980e019d7cf7","slug":"filtered-debtors-network-with-zoom-connected-nodes-on-clic","title":"Filtered & Court Roles: 1770-1775 Network of Dutchess County Insolvent Debtors and their Respective Creditors & Debtors","thumbnail":"3306bd688e8cb2ef643f5bfa27b587375ffcb005172477ee39440f4397bf6c18","access_level":"public","create_time":"$D2021-05-04T01:13:14.018Z","update_time":"$D2021-05-14T14:50:37.907Z","view_time":null,"first_public_time":"$D2021-05-04T02:39:43.071Z","has_unpublished_edits":null,"fork":{"id":"46101492e9a1e91f","slug":"debtors-network-with-zoom-connected-nodes-on-click-and-tool","title":"Debtors, network with zoom, connected nodes on click and tooltip","owner":{"id":"aa9e7a8a29012c93","login":"mkane2","name":"Maeve Kane"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3609673d6fecdc65","login":"elisabethmtatum","name":"","avatar_url":"https://avatars-next.observableusercontent.com/91966016ae38e1d44567b14fda569411248a3c47c7c0e2be5d9ee72bbcf4edfe","tier":"starter_2024"},"version":93,"publish_version":93,"role":null,"authored":false,"authors":[{"type":"individual","id":"f048b410c135de2c","login":"elisabethmtatum","name":"","avatar_url":"https://avatars-next.observableusercontent.com/91966016ae38e1d44567b14fda569411248a3c47c7c0e2be5d9ee72bbcf4edfe","tier":null}],"members":[{"type":"individual","id":"f048b410c135de2c","login":"elisabethmtatum","name":"","avatar_url":"https://avatars-next.observableusercontent.com/91966016ae38e1d44567b14fda569411248a3c47c7c0e2be5d9ee72bbcf4edfe","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"filtered network, colored by court role fork 05-07","cells":[{"id":0,"value":"md`# Filtered & Court Roles: 1770-1775 Network of Dutchess County Insolvent Debtors and their Respective Creditors & Debtors\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":9,"value":"color = {\n const scale = d3.scaleOrdinal(d3.schemeCategory10);\n return d => scale(d.court);\n}\n\n//another option for color: d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, 12))","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(\"5-14filteredgraph.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 + \"
\" + \"
\"+ \"