2c:null 2d:["$","title",null,{"children":"D3 Force-Directed Graph | Volodymyr Lut | Observable"}] 32: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(); }33:[] 30:{"id":"1b7edf4ba0d290d3","slug":"d3-force-directed-graph","title":"D3 Force-Directed Graph","thumbnail":"acf829552e0ffe5ed0e14ce460ae93176b0c767deb885f83c90a6c348a516c50","access_level":"public","create_time":"$D2020-09-29T10:08:55.768Z","update_time":"$D2020-09-29T10:16:02.208Z","view_time":null,"first_public_time":"$D2020-09-29T10:09:05.928Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"33eb08e8a313a44c","login":"volodymyrlut","name":"Volodymyr Lut","avatar_url":"https://avatars-next.observableusercontent.com/a6cda4f9dfd353a52a64c0876124d43d2005fe26c4f80e4c74174d04fd67c418","tier":"starter_2024","bio":"Doing something at @odditive, currently studying data science at UCU.\r\n\r\nScala, Node, Ruby, Python and R.\r\n\r\n"},"version":238,"publish_version":238,"role":null,"authored":false,"authors":[{"type":"individual","id":"53612cf6e65a4e07","login":"volodymyrlut","name":"Volodymyr Lut","avatar_url":"https://avatars-next.observableusercontent.com/a6cda4f9dfd353a52a64c0876124d43d2005fe26c4f80e4c74174d04fd67c418","tier":null,"bio":"Doing something at @odditive, currently studying data science at UCU.\r\n\r\nScala, Node, Ruby, Python and R.\r\n\r\n"}],"members":[{"type":"individual","id":"53612cf6e65a4e07","login":"volodymyrlut","name":"Volodymyr Lut","avatar_url":"https://avatars-next.observableusercontent.com/a6cda4f9dfd353a52a64c0876124d43d2005fe26c4f80e4c74174d04fd67c418","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3 Force-Directed Graph","cells":[{"id":1,"value":"md`# D3 Force-Directed Graph\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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"viewof filterViews = html`

\n\n\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"filterId = Generators.input(filterId1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"filterId_other = Generators.input(filterId2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"filterId","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"height = 300","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"width = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"