32:T504,viewof parameters = Inputs.form( { strengthX: slider({ min: 0, max: 1, value: 0.1, step: 0.05 }), strengthY: slider({ min: 0, max: 1, value: 0.1, step: 0.05 }), strengthManyBody: slider({ min: -2000, max: 2000, value: -200, step: 50 }), strengthLink: slider({ min: 0, max: 1, value: 0.2, step: 0.05 }), linkDistance: slider({ min: 0, max: 500, value: 100, step: 25 }) }, { template: (formParts) => htl.html`

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

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

ManyBody Strength ${Object.values(formParts)[2]}

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

Link Distance ${Object.values(formParts)[4]}

` } )33:T89e,chart = { // define height and create svg const width = 500; const height = 300; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // set basic parameters const centreX = width / 2; const centreY = height / 2; const circleRadius = 10; // define basic simulation const simulation = d3 .forceSimulation() .force("x", d3.forceX(centreX).strength(parameters.strengthX)) .force("y", d3.forceY(centreY).strength(parameters.strengthY)) .force( "link", d3 .forceLink() .distance(parameters.linkDistance) .strength(parameters.strengthLink) ) .force("repel", d3.forceManyBody().strength(parameters.strengthManyBody)); // stop radius while you append shapes simulation.stop(); // links group (just a line but you could add labels etc.) const linksGroup = svg .selectAll(".linksGroup") .data(links, (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", "#3182bd"); // as the simulation ticks, reposition links and node groups simulation.on("tick", () => { 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})`); }); // reset the simulation simulation.nodes([]); simulation.force("link").links([]); // reset the simulation simulation.nodes(nodes); simulation.force("link").links(links); simulation.alpha(1).restart(); return svg.node(); }34:[] 30:{"title":"Getting started with Force Simulations","cells":[{"id":0,"value":"# Getting started with Force Simulations","pinned":false,"hidden":false,"mode":"md"},{"id":62,"value":"## Part 1: the basics\n\nThis notebook is designed to accompany my [Medium article](https://medium.com/p/3ef50203b7ba)","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"nodes = [\n { id: 0 },\n { id: 1 },\n { id: 2 },\n { id: 3 },\n { id: 4 },\n { id: 5 },\n { id: 6 },\n { id: 7 },\n { id: 8 },\n { id: 9 },\n { id: 10 },\n { id: 11 },\n { id: 12 },\n { id: 13 },\n { id: 14 },\n { id: 15 }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"links = [\n { source: 0, target: 7 },\n { source: 1, target: 8 },\n { source: 2, target: 9 },\n { source: 3, target: 10 },\n { source: 4, target: 11 },\n { source: 7, target: 12 },\n { source: 8, target: 13 },\n { source: 9, target: 14 },\n { source: 10, target: 15 },\n { source: 5, target: 6 },\n { source: 6, target: 15 }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"style = html`\n\n\n`","pinned":false,"hidden":false,"mode":"html"}],"files":"$W34","stdlib":"1","titling":"auto"}