2d:null 2e:["$","title",null,{"children":"d3-force playground | ee2dev | Observable"}] 33:T4ea,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("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) .join("circle") .attr("r", 5) .attr("fill", color); 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); }); // initialize simulation for (const _force in forceValues) { for (const att in forceValues[_force].parameters) { simulation.force(_force)[att](forceValues[_force].parameters[att].value); } if (!forceValues[_force].enabled) { simulation.force(_force).strength(0); } } simulation.alpha(1).restart(); node.call(drag(simulation)); invalidation.then(() => simulation.stop()); return svg.node(); }34:T754,forceValues = { const obj = {}; obj.center = { function: d3.forceCenter(), description: "Shifts the view, so the graph is centered at this location", enabled: true, parameters: { x: {min: 0, max: width, step: 1, value: width / 2}, y: {min: 0, max: height, step: 1, value: height / 2}, } }; obj.collide = { function: d3.forceCollide(), description: "Prevents nodes from overlapping", enabled: true, parameters: { strength: {min: 0, max: 2, step: 0.1, value: 0.7}, radius: {min: 0, max: 100, step: 1, value: 5}, iterations: {min: 0, max: height, step: 1, value: height / 2}, } }; obj.charge = { function: d3.forceManyBody(), description: "Attracts (+) or repels (-) nodes to/from each other", enabled: true, parameters: { strength: {min: -200, max: 50, step: 0.1, value: -30}, distanceMin: {min: 0, max: 50, step: 0.1, value: 1}, distanceMax: {min: 0, max: 2000, step: 0.1, value: 2000}, } }; obj.link = { function: d3.forceLink(links).id(d => d.id), description: "Sets link length", enabled: true, parameters: { distance: {min: 0, max: 100, step: 1, value: 30}, iterations: {min: 1, max: 10, step: 1, value: 1}, } }; obj.forceX = { function: d3.forceX(), description: "Acts like gravity. Pulls all points towards an X location", enabled: false, parameters: { x: {min: 0, max: 1 * width, step: 1, value: width / 2}, strength: {min: 0, max: 1, step: .01, value: .1}, } }; obj.forceY = { function: d3.forceY(), description: "Acts like gravity. Pulls all points towards a Y location", enabled: false, parameters: { y: {min: 0, max: 1 * height, step: 1, value: height / 2}, strength: {min: 0, max: 1, step: .01, value: .1}, } }; return obj; }35:T5de,function getForm(force) { const _form = d3.create("form"); _form.append("div") .append("i") .text(forceValues[force].description); const div_cb = _form.append("div"); const input = div_cb.append("input") .attr("type", "checkbox") .attr("name", "cb"); if (forceValues[force].enabled) { input.attr("checked", true) } div_cb.append("i") .text(" on/ off"); for (const v in forceValues[force].parameters){ const div = _form.append("div"); const input = div.append("input").attr("type", "range"); const vObject = forceValues[force].parameters[v]; input.attr("name", v); for (const att in vObject) { input.attr(att, vObject[att]); } div.append("i") .text(" " + v + ": "); div.append("i") .attr("class", "value") .datum(v) .text(forceValues[force].parameters[v].value); } const form = _form.node(); form.oninput = () => { let ar = []; for (const v in forceValues[force].parameters){ // update forceValue forceValues[force].parameters[v].value = form[v].valueAsNumber; forceValues[force].enabled = form.cb.checked; // update the displayed value next to slider d3.selectAll("i.value") .filter(d => d === v) .text(form[v].valueAsNumber); // add new value to resulting array ar.push(form[v].valueAsNumber); } ar.force = force; form.value = ar; return ar; } return form; }36:[{"id":"31d904f6e21d42d4963ece9c8cc4fbd75efcbdc404bf511bc79906f0a1be68b5a01e935f65123670ed04e35ca8cae3c2b943f82bf8db49c5a67c85cbb58db052","href":"https://static.observableusercontent.com/files/31d904f6e21d42d4963ece9c8cc4fbd75efcbdc404bf511bc79906f0a1be68b5a01e935f65123670ed04e35ca8cae3c2b943f82bf8db49c5a67c85cbb58db052","name":"miserables.json","type":"application/octet-stream","lastModified":1600124280217.135,"size":18844},{"id":"932d85fb21a8944e8b930a67f0276a6d0d5b51dd762c1c76a3073c41f2ab0aed9514d0c9bf12a9ea141e62ec31fe8fce6a64a6035063525c7fff9c37e84b7406","href":"https://static.observableusercontent.com/files/932d85fb21a8944e8b930a67f0276a6d0d5b51dd762c1c76a3073c41f2ab0aed9514d0c9bf12a9ea141e62ec31fe8fce6a64a6035063525c7fff9c37e84b7406","name":"myles-tan-WNAO036c6FM-unsplash.jpg","type":"image/jpeg","lastModified":1600186198634.309,"size":961156}] 31:{"id":"ec565c5f37737927","slug":"d3-force-playground","title":"d3-force playground","thumbnail":"a96ddb1097312b59490def4bb4922627e33205a55aa2c83ecd0c819acc337d53","access_level":"public","create_time":"$D2020-09-14T22:58:00.217Z","update_time":"$D2022-12-19T14:30:09.148Z","view_time":null,"first_public_time":"$D2020-09-17T13:28:50.541Z","has_unpublished_edits":null,"fork":{"id":"a6c00de7c09bdfa1","slug":"force-directed-graph-component","title":"Force-directed graph component","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":15,"starred":false,"owner":{"type":"team","id":"e6e1e2a0da500bb6","login":"ee2dev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c41b514d64cff7415ffc87106c620e16cefe80b6d853fb3a05e19a000c3612c0","tier":"starter_2024"},"version":767,"publish_version":767,"role":null,"authored":false,"authors":[{"type":"individual","id":"9ba5e0b68d3e7972","login":"ee2dev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c41b514d64cff7415ffc87106c620e16cefe80b6d853fb3a05e19a000c3612c0","tier":null}],"members":[{"type":"individual","id":"9ba5e0b68d3e7972","login":"ee2dev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c41b514d64cff7415ffc87106c620e16cefe80b6d853fb3a05e19a000c3612c0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":10,"collection":null,"type":"notebook","body":{"title":"d3-force playground","cells":[{"id":247,"value":"md`# d3-force playground\n\n

\n\nThis observable lets you understand the different parameters and forces for [d3-force](https://github.com/d3/d3-force). This is for you
\n👉 *if you want to better understand the different forces
\n👉 if you want to find the right force parameter settings for your data*
\n\n\nBased on
\n👍 https://observablehq.com/@d3/force-directed-graph 😍😍😍
\n👍 https://bl.ocks.org/steveharoz/8c3e2524079a8c440df60c1ab72b5d03 😍😍😍`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"md`## The data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = FileAttachment(\"miserables.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"md`## The force layout`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"viewof force = {\n return select({\n title: \"Please pick your force:\",\n options: Object.keys(forceValues),\n value: Object.keys(forceValues)[0],\n});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"viewof parameter = getForm(force)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"md`## Bonus Section\n\nYou want to add a new force to explore in this playground? \n\nJust import the force function to this notebook or add a named cell containing the new force function and add an entry to the following cell *forceValues* and you are ready to go!💪\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"md`Bugs, improvements, feedback are always highly appreciated!🙏`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"simulation = {\n const sim = d3.forceSimulation(nodes);\n for (const _force in forceValues) {\n sim.force(_force, forceValues[_force][\"function\"]);\n }\n return sim;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"updateForces = {\n if (forceValues[parameter.force].enabled) { \n if (!simulation.force(parameter.force)) { // reset force\n simulation.force(parameter.force, forceValues[parameter.force].function) \n }\n let i = 0;\n for (const att in forceValues[parameter.force].parameters) {\n simulation.force(parameter.force)[att](parameter[i++]);\n }\n } else { // force disabled via checkbox\n simulation.force(parameter.force, null);\n }\n simulation.alpha(1).restart();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"links = data.links.map(d => Object.create(d));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"nodes = data.nodes.map(d => Object.create(d));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"height = 600","pinned":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"drag = simulation => {\n \n function dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n event.subject.fx = event.subject.x;\n event.subject.fy = event.subject.y;\n }\n \n function dragged(event) {\n event.subject.fx = event.x;\n event.subject.fy = event.y;\n }\n \n function dragended(event) {\n if (!event.active) simulation.alphaTarget(0);\n event.subject.fx = null;\n event.subject.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"