2f:T433,viewof parameters = Inputs.form( { radialStrength: slider({ min: 0, max: 1, value: 0.6, step: 0.05 }), repelStrength: slider({ min: -200, max: 0, value: -50, step: 10 }), showLinks: checkbox({ options: [{ value: "toggle", label: "On" }], value: "toggle" }), linkStrength: slider({ min: 0, max: 1, value: 0.5, step: 0.05 }) }, { template: (formParts) => htl.html`

Radial Strength ${Object.values(formParts)[0]}

Repel Strength ${Object.values(formParts)[1]}

Show Links ${Object.values(formParts)[2]}

Link Strength ${Object.values(formParts)[3]}

` } )30:T798,chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const centreY = height / 2; // depth 0 sticks to centre - others only minimally // adding a line of code // stop radius while you append shapes simulation.stop(); const colorScale = d3.scaleOrdinal(d3.schemeCategory10); const chartLinks = parameters.showLinks === "toggle" ? links : []; // links group (just a line but you could add labels etc.) const linksGroup = svg .selectAll(".linksGroup") .data(chartLinks, (d) => d.id) .join((group) => { const enter = group.append("g").attr("class", "linksGroup"); enter.append("line").attr("class", "linkLine"); return enter; }); linksGroup .select(".linkLine") .attr("stroke-width", 1) .attr("stroke", (d) => "#A0A0A0"); // nodes group (just a circle but you could add labels etc.) const nodesGroup = svg .selectAll(".nodesGroup") .data(nodes) .join((group) => { const enter = group.append("g").attr("class", "nodesGroup"); enter.append("circle").attr("class", "nodeCircle"); return enter; }); nodesGroup .select(".nodeCircle") .attr("r", circleRadius) .attr("fill", (d) => colorScale(d.depth)); // making sure it is 100% resetting nodes.forEach((node) => { node.x = undefined; node.y = undefined; }); simulation.nodes([]); simulation.force("link").links([]); // restart the simulation simulation.nodes(nodes); simulation.force("link").links(chartLinks); simulation.alpha(1).restart(); simulation.on("tick", () => { // as the simulation ticks, reposition links and node groups svg .selectAll(".linkLine") .attr("x1", (d) => d.source.x) .attr("x2", (d) => d.target.x) .attr("y1", (d) => d.source.y) .attr("y2", (d) => d.target.y); nodesGroup.attr("transform", (d) => `translate(${d.x},${d.y})`); }); return svg.node(); }31:T5a0,nodes = [ { id: 0, depth: 0 }, { id: 1, depth: 0 }, { id: 2, depth: 0 }, { id: 3, depth: 0 }, { id: 4, depth: 0 }, { id: 5, depth: 0 }, { id: 6, depth: 0 }, { id: 7, depth: 1 }, { id: 8, depth: 1 }, { id: 9, depth: 1 }, { id: 10, depth: 1 }, { id: 11, depth: 1 }, { id: 12, depth: 1 }, { id: 13, depth: 1 }, { id: 14, depth: 1 }, { id: 15, depth: 1 }, { id: 16, depth: 1 }, { id: 17, depth: 1 }, { id: 18, depth: 1 }, { id: 19, depth: 1 }, { id: 20, depth: 1 }, { id: 21, depth: 1 }, { id: 22, depth: 1 }, { id: 23, depth: 1 }, { id: 24, depth: 1 }, { id: 25, depth: 1 }, { id: 26, depth: 1 }, { id: 27, depth: 1 }, { id: 28, depth: 1 }, { id: 29, depth: 1 }, { id: 30, depth: 1 }, { id: 31, depth: 1 }, { id: 32, depth: 2 }, { id: 33, depth: 2 }, { id: 34, depth: 2 }, { id: 35, depth: 2 }, { id: 36, depth: 2 }, { id: 37, depth: 2 }, { id: 38, depth: 2 }, { id: 39, depth: 2 }, { id: 40, depth: 2 }, { id: 41, depth: 2 }, { id: 42, depth: 2 }, { id: 43, depth: 2 }, { id: 44, depth: 2 }, { id: 45, depth: 2 }, { id: 46, depth: 2 }, { id: 47, depth: 2 }, { id: 48, depth: 2 }, { id: 49, depth: 2 }, { id: 50, depth: 2 }, { id: 51, depth: 2 }, { id: 52, depth: 2 }, { id: 53, depth: 2 }, { id: 54, depth: 2 }, { id: 55, depth: 2 }, { id: 56, depth: 2 }, { id: 57, depth: 2 }, { id: 58, depth: 2 }, { id: 59, depth: 2 } ]32:T63e,links = [ { source: 0, target: 7 }, { source: 7, target: 41 }, { source: 1, target: 8 }, { source: 9, target: 51 }, { source: 2, target: 12 }, { source: 16, target: 45 }, { source: 3, target: 16 }, { source: 8, target: 32 }, { source: 4, target: 17 }, { source: 10, target: 33 }, { source: 5, target: 9 }, { source: 11, target: 34 }, { source: 6, target: 10 }, { source: 12, target: 35 }, { source: 0, target: 11 }, { source: 13, target: 36 }, { source: 1, target: 18 }, { source: 14, target: 37 }, { source: 2, target: 13 }, { source: 15, target: 38 }, { source: 3, target: 14 }, { source: 16, target: 39 }, { source: 4, target: 15 }, { source: 17, target: 40 }, { source: 5, target: 19 }, { source: 18, target: 42 }, { source: 6, target: 20 }, { source: 19, target: 43 }, { source: 0, target: 21 }, { source: 20, target: 44 }, { source: 5, target: 22 }, { source: 21, target: 46 }, { source: 6, target: 23 }, { source: 22, target: 47 }, { source: 0, target: 24 }, { source: 23, target: 48 }, { source: 1, target: 25 }, { source: 24, target: 49 }, { source: 2, target: 26 }, { source: 25, target: 50 }, { source: 3, target: 27 }, { source: 26, target: 51 }, { source: 4, target: 28 }, { source: 27, target: 52 }, { source: 5, target: 29 }, { source: 28, target: 53 }, { source: 6, target: 30 }, { source: 29, target: 54 }, { source: 0, target: 31 }, { source: 30, target: 55 }, { source: 0, target: 24 }, { source: 31, target: 57 }, { source: 0, target: 20 }, { source: 23, target: 59 } ]33:[] 2d:{"title":"Getting started with Force Simulations","cells":[{"id":0,"value":" # Getting started with Force Simulations","pinned":false,"hidden":false,"mode":"md"},{"id":63,"value":"## Part 3: d3.forceRadial\n\nThis notebook is designed to accompany my [Medium article](https://medium.com/p/947647502ee8/)","pinned":false,"hidden":false,"mode":"md"},{"id":94,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"simulation = d3\n .forceSimulation()\n .force(\"link\", d3.forceLink().strength(parameters.linkStrength))\n .force(\"repel\", d3.forceManyBody().strength(parameters.repelStrength))\n .force(\n \"radial\",\n d3\n .forceRadial()\n .radius((d) => d.depth * radialWidth)\n .x(centreX)\n .y(centreY)\n .strength(parameters.radialStrength)\n )\n .force(\n \"collide\",\n d3.forceCollide().radius((d) => circleRadius * 1.1)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"circleRadius = 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"radialWidth = 120","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"height = width * 0.6","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"centreX = width / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"centreY = height / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"parameters.showLinks","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"import { checkbox, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"style = html`\n\n\n`","pinned":false,"hidden":false,"mode":"html"}],"files":"$W33","stdlib":"1","titling":"auto"}