29:null 2a:["$","title",null,{"children":"The force may be with you (anime) | Marc | Observable"}] 2f:Ta9a,chart = { const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]); let simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id).distance(fLinkDistance).strength(fLinkStrength)) .force("r", d3.forceRadial().radius(d => d.r).strength(fRadialStrength)) .force("charge", d3.forceManyBody().strength(fAttraction)) .force("collide", d3.forceCollide().radius(fCollisionRadius).strength(fCollisionStrength).iterations(1)) .on("tick", ticked) let link = svg.append("g") .selectAll("line") .data(links) .join("line") .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y) .attr("stroke-dasharray", "0 5") .attr("stroke-linecap", "round") .attr("stroke-width", 4) .attr("stroke", d => d.source.color) let node = svg.append("g") .selectAll("circle") .data(nodes) .join("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", 20) .attr("stroke-width", "2px") .attr("stroke", "#000") .attr('cursor', 'pointer') .style("fill", d => d.color) .on("click", (e, d) => addNodes(d)) function ticked() { node = node .attr("cx", d => d.x) .attr("cy", d => d.y) link = 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) } function addNodes(parent) { const { color, r, id } = parent; Array.from({length: nodesToAdd}, () => { const newId = uuid(); nodes.push({ id: newId, color, r: parent.r + 300 }); links.push({ source: id, target: newId }); }) simulation.nodes(nodes).on("tick", null) simulation.alpha(1) while(simulation.alpha() > 0.3) { simulation.tick() } simulation.nodes(nodes).on("tick", ticked) node = node .data(nodes) .join(enter => enter.append("circle")) .attr("r", 20) .attr("stroke-width", "2px") .attr("stroke", "#000") .attr('cursor', 'pointer') .style("fill", d => d.color) .on("click", (e, d) => addNodes(d)) link = link .data(links) .join("line") .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y) .attr("stroke-dasharray", "0 5") .attr("stroke-linecap", "round") .attr("stroke-width", 4) .attr("stroke", d => d.source.color) simulation.alpha(0.3).restart(); } return svg.node(); }30:[] 2d:{"id":"160390c871ccf178","slug":"the-force-may-be-with-you-anime","title":"The force may be with you (anime)","thumbnail":"8fc685de7537aaf81128b961f9996f688f982e835ef29520c675275b69c7134c","access_level":"public","create_time":"$D2020-10-20T19:21:06.923Z","update_time":"$D2020-10-20T20:03:51.216Z","view_time":null,"first_public_time":"$D2020-10-20T19:22:34.082Z","has_unpublished_edits":null,"fork":{"id":"970de1d37bab5755","slug":"the-force-may-be-with-you/8","title":"The force may be with you","owner":{"id":"434cb156a556d773","login":"ms007","name":"Marc"}},"stars":0,"starred":false,"owner":{"type":"team","id":"434cb156a556d773","login":"ms007","name":"Marc","avatar_url":"https://avatars-next.observableusercontent.com/2784a43d4d784dd7e5f3f20402bb6f39cae7713bc414cb32ea865151ea00580a","tier":"starter_2024"},"version":756,"publish_version":756,"role":null,"authored":false,"authors":[{"type":"individual","id":"b0c5a0f5aedaad15","login":"ms007","name":"Marc","avatar_url":"https://avatars-next.observableusercontent.com/2784a43d4d784dd7e5f3f20402bb6f39cae7713bc414cb32ea865151ea00580a","tier":null}],"members":[{"type":"individual","id":"b0c5a0f5aedaad15","login":"ms007","name":"Marc","avatar_url":"https://avatars-next.observableusercontent.com/2784a43d4d784dd7e5f3f20402bb6f39cae7713bc414cb32ea865151ea00580a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"The force may be with you (anime)","cells":[{"id":0,"value":"md`# The force may be with you (anime)\n\n\n \n \n \n\n

${viewof nodesToAdd}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"nodes = [\n // fx - fy = fixed position\n {id: 'a', color: '#fcbb00', r: 200, fx: 54.0779740156158, fy: -166.43489035165186}, \n {id: 'b', color: '#fcbb00', r: 200, fx: 141.5779740156158, fy: -102.8624191511828}, \n {id: 'c', color: '#fcbb00', r: 200, fx: 175, fy: 0}, \n {id: 'd', color: '#fcbb00', r: 200, fx: 141.5779740156158, fy: 102.8624191511828}, \n {id: 'e', color: '#6e2382', r: 200, fx: 54.0779740156158, fy: 166.43489035165186}, \n {id: 'f', color: '#6e2382', r: 200, fx: -54.07797401561579, fy: 166.4348903516519}, \n {id: 'g', color: '#153a84', r: 200, fx: -141.57797401561578, fy: 102.86241915118282}, \n {id: 'h', color: '#153a84', r: 200, fx: -175, fy: 2.1431318985078682e-14}, \n {id: 'i', color: '#153a84', r: 200, fx: -141.5779740156158, fy: -102.86241915118278}, \n {id: 'k', color: '#0179c7', r: 200, fx: -54.07797401561582, fy: -166.43489035165186}\n ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"links = [];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"height = 2000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"width = 2000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"uuid = function uuid() {\n var template = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx';\n return template.replace(/[xy]/g, c => {\n var r = (Math.random() * 16) | 0;\n if (c === 'y') r = (r & 3) | 8;\n return r.toString(16);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"viewof nodesToAdd = slider({\n min:1,\n max:20,\n value:5,\n title: \"Nodes to add with each click\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"viewof fRadialStrength = slider({\n min:0,\n max:1,\n value:1,\n title: \"Radial strength\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"viewof fCollisionStrength = slider({\n min:0,\n max:1,\n value:1,\n title: \"Node collision strength\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"viewof fCollisionRadius = slider({\n min:0,\n max:50,\n value:24,\n title: \"Node collision radius\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"viewof fAttraction = slider({\n min:-200,\n max:200,\n value:-30,\n title: \"Body attraction\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"viewof fLinkStrength = slider({\n min:0,\n max:1,\n value:1,\n title: \"Link strength\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"viewof fLinkDistance = slider({\n min:-200,\n max:200,\n value:100,\n title: \"Link distance\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"