2d:null 2e:["$","title",null,{"children":"D3 Force-Directed Graph with Input | asgersp | Observable"}] 33:T694,chart = { let links = [] let nodes = [] if(filterId === "All"){ links = data.links.map(d => Object.create(d)); nodes = data.nodes.map(d => Object.create(d)); } else { links = data.links.filter(d => d.source == filterId || d.target == filterId).map(d => Object.create(d)); const otherPersons = links.map(d => d.source !== filterId ? d.source : d.target) nodes = data.nodes.filter(d => d.id == filterId || otherPersons.indexOf(d.id) >= 0).map(d => Object.create(d)); } const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, height / 2)); const svg = d3.select(DOM.svg(width, height)) .style('max-width', '100%') .style('max-height', '100%'); const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .enter().append("line") .attr("stroke-width", d => Math.sqrt(d.value)); const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .enter().append("circle") .attr("r", d => d.value) .attr("fill", color) .call(drag(simulation)); node.append("title") .text(d => d.id); simulation.on("tick", () => { link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node .attr("cx", d => d.x) .attr("cy", d => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }34:[] 31:{"id":"ea4d53a78a113b08","slug":"d3-force-directed-graph-with-input","title":"D3 Force-Directed Graph with Input","thumbnail":"830ff6e7f619c121c4d77081930041582750c5ecd4f631c2d1416491ac3594cc","access_level":"public","create_time":"$D2020-09-29T10:13:45.806Z","update_time":"$D2022-09-14T19:19:51.383Z","view_time":null,"first_public_time":"$D2020-10-05T08:46:12.078Z","fork":{"id":"1b7edf4ba0d290d3","slug":"d3-force-directed-graph","title":"D3 Force-Directed Graph","owner":{"id":"33eb08e8a313a44c","login":"volodymyrlut","name":"Volodymyr Lut"}},"stars":0,"starred":false,"owner":{"type":"team","id":"dc3877dcae433b00","login":"asgersp","name":"","avatar_url":"https://avatars-next.observableusercontent.com/dbd83c7da4decd8de55ee510ba27fc4dceabd946c8abf114e12f4c75c024895e","tier":"starter_2024"},"version":229,"publish_version":229,"role":null,"authored":false,"authors":[{"type":"individual","id":"659be6f3bd7aecec","login":"asgersp","name":"","avatar_url":"https://avatars-next.observableusercontent.com/dbd83c7da4decd8de55ee510ba27fc4dceabd946c8abf114e12f4c75c024895e","tier":null}],"members":[{"type":"individual","id":"659be6f3bd7aecec","login":"asgersp","name":"","avatar_url":"https://avatars-next.observableusercontent.com/dbd83c7da4decd8de55ee510ba27fc4dceabd946c8abf114e12f4c75c024895e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":null,"type":"notebook","body":{"title":"D3 Force-Directed Graph with Input","cells":[{"id":1,"value":"md`# D3 Force-Directed Graph with Input\n\nThis network of character co-occurence in _Les Misérables_ is positioned by simulated forces using [d3-force](https://github.com/d3/d3-force). See also a [disconnected graph](/@mbostock/disjoint-force-directed-graph), and compare to [WebCoLa](/@mbostock/hello-cola).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"viewof filterId = html`\n`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"filterId","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = d3.json(\"https://gist.githubusercontent.com/AsgerSP/557c583727b52624f724536bed5eeb5d/raw/278b359d2f4877b99a4d6d70297b08ab4ef348d1/lesmis1.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"height = 300","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"width = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"color = {\n const scale = d3.scaleOrdinal(d3.schemeCategory10);\n return d => scale(d.group);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"