36:["$","title",null,{"children":"The force may be with you | Marc | Observable"}] 3e:T723,chart = { const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]); applySimulation(nodes, links); 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 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 }); }) applySimulation(nodes, links) node = node .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)) 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) } return svg.node(); }3f:[] 3a:{"id":"970de1d37bab5755","slug":"the-force-may-be-with-you/8","title":"The force may be with you","thumbnail":"af18a84555b99940233822f78b6bb06f5f0bc5a54cd6ded443803d8b35120ddc","access_level":"public","create_time":"$D2020-10-15T17:23:05.819Z","update_time":"$D2020-10-30T09:48:27.252Z","view_time":null,"first_public_time":"$D2020-10-15T17:58:43.779Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"434cb156a556d773","login":"ms007","name":"Marc","avatar_url":"https://avatars-next.observableusercontent.com/2784a43d4d784dd7e5f3f20402bb6f39cae7713bc414cb32ea865151ea00580a","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":673,"publish_version":673,"role":null,"authored":false,"authors":[{"type":"individual","id":"b0c5a0f5aedaad15","login":"ms007","name":"Marc","avatar_url":"https://avatars-next.observableusercontent.com/2784a43d4d784dd7e5f3f20402bb6f39cae7713bc414cb32ea865151ea00580a","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"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":{"titling":"auto","title":"The force may be with you","cells":[{"id":0,"value":"md`# The force may be with you\n\n\n \n \n\n\n\n \n \n \n\n\n \n \n \n\n

${viewof fLinkDistance}	${viewof fCollisionRadius}	${viewof fAttraction}
${viewof fLinkStrength}	${viewof fCollisionStrength}	${viewof fRadialStrength}
${viewof nodesToAdd}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"applySimulation = (nodes, links) => {\n const simulation = d3.forceSimulation(nodes)\n .force(\"link\", d3.forceLink(links).id(d => d.id).distance(fLinkDistance).strength(fLinkStrength))\n .force(\"r\", d3.forceRadial().radius(d => d.r).strength(fRadialStrength))\n .force(\"charge\", d3.forceManyBody().strength(fAttraction))\n .force(\"collide\", d3.forceCollide().radius(fCollisionRadius).strength(fCollisionStrength))\n .stop()\n\n while (simulation.alpha() > 0.01) {\n simulation.tick(); \n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"links = [];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"height = 2000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"width = 2000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3f","stdlib":"1"}} 35:null