2f:T80d,chart1 = { // init plot + get relevant data and keyframe const svg = d3.select(DOM.svg(chart_param.width, chart_param.height)), nodes = node_data.map(d => Object.create(d)), kf = keyframe1, radius = 200; svg.append("defs") .append("marker") .attr("id", "arrowhead") .attr("markerWidth", "10") .attr("markerHeight", "7") .attr("refX", "0") .attr("refY", "3.5") .attr("orient", "auto") .append("polygon") .attr("points", "0 0, 10 3.5, 0 7"); svg.selectAll(".guide-circle") .data(node_data.filter((d, i) => i % 1 == 0)).enter() .append("circle") .classed("guide-circle", true) .attr("cx", x(0.5)) .attr("cy", y(0.5)) .attr("r", d => distance([d.x, d.y], [x(0.5), y(0.5)])) .style("fill", "none") .style("stroke", "#bbb") .style("stroke-dasharray", 4); const sim = d3.forceSimulation(nodes) .velocityDecay(0) .force("orbit", () => { nodes.forEach((node, ix) => { const node_r = distance([node.x, node.y], [x(0.5), y(0.5)]), theta = Math.atan((node.y - y(0.5)) / (node.x - x(0.5))), target_x = x(0.5) + node_r * Math.cos(theta + 0.05) * (node.x < x(0.5) ? -1 : 1), target_y = y(0.5) + node_r * Math.sin(theta + 0.05) * (node.x < x(0.5) ? -1 : 1); if (ix % 1 == 0) { node.vx = target_x - node.x; node.vy = target_y - node.y; } }); }) .stop() .tick(kf); const [node, edge] = draw_nodes(svg, nodes, null, false, false); if (arrows1) { svg.selectAll(".arrow") .data(nodes).enter() .append("line") .classed("arrow", true) .attr("x1", d => d.x) .attr("y1", d => d.y) .attr("x2", d => d.x + d.vx * 5) .attr("y2", d => d.y + d.vy * 5) .style("stroke", "black") .attr("marker-end", "url(#arrowhead)"); } // update each node upon simulation tick sim.on("tick", () => { node .attr("cx", d => d.x) .attr("cy", d => d.y); }); return svg.node(); }30:T915,chart2 = { // init plot + get relevant data and keyframe const svg = d3.select(DOM.svg(chart_param.width, chart_param.height)), nodes = node_data.map(d => Object.create(d)), kf = keyframe2, radius = 200; svg.append("defs") .append("marker") .attr("id", "arrowhead") .attr("markerWidth", "10") .attr("markerHeight", "7") .attr("refX", "0") .attr("refY", "3.5") .attr("orient", "auto") .append("polygon") .attr("points", "0 0, 10 3.5, 0 7"); svg.selectAll(".guide") .data(node_data).enter() .append("line") .classed("guide", true) .attr("x1", x(0.5)) .attr("y1", y(0.5)) .attr("x2", d => d.x) .attr("y2", d => d.y) .style("fill", "none") .style("stroke", "#bbb") .style("stroke-dasharray", 4); const sim = d3.forceSimulation(nodes) .velocityDecay(0) .force("pulse", () => { nodes.forEach((node, ix) => { const node_r = distance([node.x, node.y], [x(0.5), y(0.5)]), theta = Math.atan((node.y - y(0.5)) / (node.x - x(0.5))); node.vx += -0.01 * Math.cos(theta) * (node.x < x(0.5) ? -1 : 1); node.vy += -0.01 * Math.sin(theta) * (node.x < x(0.5) ? -1 : 1); }); }) .force("orbit", () => { nodes.forEach((node, ix) => { const node_r = distance([node.x, node.y], [x(0.5), y(0.5)]), theta = Math.atan((node.y - y(0.5)) / (node.x - x(0.5))), target_x = x(0.5) + node_r * Math.cos(theta + 0.005) * (node.x < x(0.5) ? -1 : 1), target_y = y(0.5) + node_r * Math.sin(theta + 0.005) * (node.x < x(0.5) ? -1 : 1); // node.x = target_x; // node.y = target_y; }); }) .stop() .tick(kf); const [node, edge] = draw_nodes(svg, nodes, null, false, false); if (arrows2) { svg.selectAll(".arrow") .data(nodes).enter() .append("line") .classed("arrow", true) .attr("x1", d => d.x) .attr("y1", d => d.y) .attr("x2", d => d.x + d.vx * 30) .attr("y2", d => d.y + d.vy * 30) .style("stroke", "black") .attr("marker-end", "url(#arrowhead)"); } // update each node upon simulation tick sim.on("tick", () => { node .attr("cx", d => d.x) .attr("cy", d => d.y); }); return svg.node(); }31:T590,chart3 = { // init plot + get relevant data and keyframe const svg = d3.select(DOM.svg(chart_param.width, chart_param.height)), nodes = node_data.map(d => Object.create(d)), kf = keyframe3; svg.append("defs") .append("marker") .attr("id", "arrowhead") .attr("markerWidth", "10") .attr("markerHeight", "7") .attr("refX", "0") .attr("refY", "3.5") .attr("orient", "auto") .append("polygon") .attr("points", "0 0, 10 3.5, 0 7"); const sim = d3.forceSimulation(nodes) .velocityDecay(0) .force("jitter", () => { nodes.forEach((node, ix) => { if (ix == (keyframe3 % nodes.length)) { console.log(node); node.vx += d3.randomNormal(0, 0.1)(); node.vy += d3.randomNormal(0, 0.1)(); } }) }) .stop() .tick(kf); const [node, edge] = draw_nodes(svg, nodes, null, false, false); if (arrows3) { svg.selectAll(".arrow") .data(nodes).enter() .append("line") .classed("arrow", true) .attr("x1", d => d.x) .attr("y1", d => d.y) .attr("x2", d => d.x + d.vx * 5) .attr("y2", d => d.y + d.vy * 5) .style("stroke", "black") .attr("marker-end", "url(#arrowhead)"); } // update each node upon simulation tick sim.on("tick", () => { node .attr("cx", d => d.x) .attr("cy", d => d.y); }); return svg.node(); }32:T8f2,chart4 = { // init plot + get relevant data and keyframe const svg = d3.select(DOM.svg(chart_param.width, chart_param.height)), nodes = node_data2.map(d => Object.create(d)), kf = keyframe4; const radius = chart_param.height * 0.3; svg.append("defs") .append("marker") .attr("id", "arrowhead") .attr("markerWidth", "10") .attr("markerHeight", "7") .attr("refX", "0") .attr("refY", "3.5") .attr("orient", "auto") .append("polygon") .attr("points", "0 0, 10 3.5, 0 7"); svg.append("circle") .attr("cx", chart_param.width / 2) .attr("cy", chart_param.height / 2) .attr("r", radius) .style("fill", "none") .style("fill", "none") .style("stroke", "#bbb") .style("stroke-dasharray", 4); svg.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", chart_param.width) .attr("height", chart_param.height / 2) .style("fill", "white"); const sim = d3.forceSimulation(nodes) .force("y", d3.forceY(chart_param.height * 0.5 + radius)) .force("collide", d3.forceCollide(d => d.r + 0.5)) .force("bounding-circle", () => { nodes.forEach(node => { // if node is outside of the bounding circle, // move node just inside circle along same polar axis if ((distance([node.x, node.y], [x(0.5), y(0.5)]) + node.r) > radius) { const theta = Math.atan((node.y - y(0.5)) / (node.x - x(0.5))); node.x = x(0.5) + (radius - node.r) * Math.cos(theta) * (node.x < x(0.5) ? -1 : 1); node.y = y(0.5) + (radius - node.r) * Math.sin(theta) * (node.x < x(0.5) ? -1 : 1); } }) }) .stop() .tick(kf); const [node, edge] = draw_nodes(svg, nodes, null, true, false); if (arrows4) { svg.selectAll(".arrow") .data(nodes).enter() .append("line") .classed("arrow", true) .attr("x1", d => d.x) .attr("y1", d => d.y) .attr("x2", d => d.x + d.vx * 5) .attr("y2", d => d.y + d.vy * 5) .style("stroke", "black") .attr("marker-end", "url(#arrowhead)"); } // update each node upon simulation tick sim.on("tick", () => { node .attr("cx", d => d.x) .attr("cy", d => d.y); }); return svg.node(); }33:T8c4,chart5 = { // init plot + get relevant data and keyframe const svg = d3.select(DOM.svg(chart_param.width, chart_param.height)), nodes = node_data2.map(d => Object.create(d)), kf = keyframe5; const box_w = chart_param.width * 0.4, box_h = chart_param.height * 0.7; svg.append("defs") .append("marker") .attr("id", "arrowhead") .attr("markerWidth", "10") .attr("markerHeight", "7") .attr("refX", "0") .attr("refY", "3.5") .attr("orient", "auto") .append("polygon") .attr("points", "0 0, 10 3.5, 0 7"); svg.append("rect") .attr("x", (chart_param.width - box_w) / 2) .attr("y", (chart_param.height - box_h) / 2) .attr("width", box_w) .attr("height", box_h) .style("fill", "none") .style("stroke", "#bbb") .style("stroke-dasharray", 4); const sim = d3.forceSimulation(nodes) .force("y", d3.forceY((chart_param.height + box_h) * 0.5)) .force("collide", d3.forceCollide(d => d.r + 0.5)) .force("bounding-rect", () => { nodes.forEach(node => { // if node is outside of the bounding circle, // move node just inside circle along same polar axis if ((node.x + node.r) > (chart_param.width + box_w) / 2) { node.x = (chart_param.width + box_w) / 2 - node.r; } else if ((node.x - node.r) < (chart_param.width - box_w) / 2) { node.x = (chart_param.width - box_w) / 2 + node.r; } if ((node.y + node.r) > (chart_param.height + box_h) / 2) { node.y = (chart_param.height + box_h) / 2 - node.r; } }) }) .stop() .tick(kf); const [node, edge] = draw_nodes(svg, nodes, null, true, false); if (arrows4) { svg.selectAll(".arrow") .data(nodes).enter() .append("line") .classed("arrow", true) .attr("x1", d => d.x) .attr("y1", d => d.y) .attr("x2", d => d.x + d.vx * 5) .attr("y2", d => d.y + d.vy * 5) .style("stroke", "black") .attr("marker-end", "url(#arrowhead)"); } // update each node upon simulation tick sim.on("tick", () => { node .attr("cx", d => d.x) .attr("cy", d => d.y); }); return svg.node(); }34:T9b2,chart6 = { // init plot + get relevant data and keyframe const svg = d3.select(DOM.svg(chart_param.width, chart_param.height)), nodes_ = [...Array(n_nodes_slider)].map(() => ({ x: x(Math.min(Math.max(d3.randomNormal(0.5, 0.15)(), 0), 1)), y: y(Math.min(Math.max(d3.randomNormal(0.5, 0.15)(), 0), 1)), r: 8 })); nodes_.sort((a, b) => d3.descending(a.y, b.y)); const nodes = nodes_.map((d, i, n) => Object.assign(d, {"gp": i >= (n_nodes_slider - n_filter_nodes_slider) ? 1 : 0})); restart6; let wall_y = chart_param.height * 2; const wall = svg.append("g") .attr("transform", `translate(0, ${wall_y})`); wall.append("line") .attr("x1", 0) .attr("x2", chart_param.width) .style("stroke", "black"); wall.append("text") .attr("x", chart_param.width - 10) .attr("y", 15) .style("text-anchor", "end") .text(filter_name); svg.on("mousemove", (e) => { wall_y = d3.pointer(e)[1]; wall.attr("transform", `translate(0, ${wall_y})`); sim .force("y", d3.forceY(d => { if (d.gp == 1) { if (wall_y < chart_param.height * 0.5) return wall_y; else return chart_param.height * 0.5; } else { return chart_param.height * 0.5; } }).strength(0.3)) .force("x", d3.forceX(d => chart_param.width * 0.5) .strength(0.3)); }); const sim = d3.forceSimulation(nodes) .force("x", d3.forceX(d => { return chart_param.width * 0.5; }).strength(0.3)) .force("y", d3.forceY().y(d => { const y1 = wall_y, y2 = chart_param.height * 0.5; console.log(wall_y, y2, y1 < y2); return (y1 < y2 ? 0.5 : 1) * y2; }).strength(0.3)) .force("collide", d3.forceCollide(d => 8 + 1)) .force("bounding-rect", () => { nodes.forEach(node => { // if larger nodes are below bounding line, move to above line if (node.gp == 1 && (node.y + node.r) > wall_y) { node.y = wall_y - node.r; } }) }) .alpha(0.2) .alphaTarget(0.01) .stop() .tick(500) .restart(); const [node, edge] = draw_nodes(svg, nodes, null, false, false); node.style("fill", d => d.gp == 1 & !!show_filter_nodes_slider ? "blue" : "black"); // update each node upon simulation tick sim.on("tick", () => { node .attr("cx", d => d.x) .attr("cy", d => d.y); }); return svg.node(); }35:T757,chart7 = { // init plot + get relevant data and keyframe const chart_width = width * 0.75, chart_height = chart_param.height, svg = d3.select(DOM.svg(chart_width, chart_height)), n_nodes = 500, nodes = [...Array(n_nodes)].map((d, i) => ({ x: x(i % Math.ceil(Math.sqrt(n_nodes)) / Math.sqrt(n_nodes)) * width / chart_param.width, y: y(Math.floor(i / Math.ceil(Math.sqrt(n_nodes))) / Math.sqrt(n_nodes)), color: ["#EA5950", "#469CB5", "#4CA65B"][d3.randomInt(3)()], size: "2em", radius: 13, c: generateRandomString(1) })); svg.append("polygon") .attr("points", polygon_points) .style("fill", "none") .style("stroke", "#D6D6D6"); const sim = d3.forceSimulation(nodes) .force("x", d3.forceX(chart_width / 2).strength(0.018)) .force("y", d3.forceY(chart_height / 2).strength(0.018)) .force("collide", d3.forceCollide(d => d.radius).strength(1)) .stop() // .tick(0); .tick(500) .restart(); const node = svg.selectAll(".node") .data(nodes).enter() .filter(d => geometric.pointInPolygon([d.x, d.y], polygon_points)) .append("g") .classed("node", true) .attr("transform", d => `translate(${d.x}, ${d.y})`); node.append("text") .classed("weepeople", true) .style("text-anchor", "middle") .style("alignment-baseline", "middle") .style("font-size", d => d.size) .style("fill", (d, i) => i <= 10 ? d.color : "#D6D6D6") .text((d) => d.c); node.filter((d, i) => i <= 10).raise(); // update each node upon simulation tick sim.on("tick", () => { node.attr("transform", d => `translate(${d.x}, ${d.y})`); // node.selectAll("text") // .style("fill", (d, i) => geometric.pointInPolygon([d.x, d.y], polygon_points) ? d.color : "none") }); return svg.node(); }36:T69d,// polygon_points_str = "32.5,125.5 101.5,87.5 75.5,34.5 199.4,34.5 261.2,125.5 357.5,61.5 424.5,100.5 377.5,132.5 424.5,156.5 383.5,209.5 308.5,201.5 359.5,310.5 403.5,280.5 413.5,341.5 386.5,418.5 277.5,418.5 217.5,298.5 195.7,418.5 84.8,418.5 64.5,301.5 83.5,249.5 13.5,236.5 79.5,198.5" polygon_points_str = "114.2,76.1 130.3,82.9 131.1,80.2 132.5,72.4 202.4,84.9 311.1,94 375.8,93.9 389.7,92.9 417.9,101.7 438.4,102.4 455.9,107.3 490.9,111.2 497.3,119.4 466.1,128.5 461.3,152.9 464.8,177.2 469.8,180.7 476,173.5 477.4,162.5 473.3,153.5 476.2,137.3 484.8,130.3 495,127.3 502,134.2 510.8,146.7 514.5,160.4 507,173.4 520.1,175.7 547.5,155.9 552.8,144.7 569.9,140.5 576.2,123.2 583.1,117.2 611.5,110 619.8,99.3 621.6,85 626.1,73.8 639.2,74.2 645.4,91.5 656.1,99.7 645.9,110.5 633.5,121.2 628.1,129.2 627.4,141 635.9,142.3 639.3,147.3 625.1,154.8 622.8,159.5 604.2,172.8 604.4,182.3 599.5,193.7 599.2,202.4 594.2,222.5 600.8,234 595.5,249.5 580.8,265.4 573.1,268.7 568.2,279.4 557.9,290.2 551,307.5 552.2,317.9 564.8,339.6 575.2,360.3 577.1,378.8 574.6,384.3 566.2,384.6 550,366.3 540.8,353 541.8,344.1 538.9,337.1 536,336.9 527.6,328.3 523.1,326.2 519.9,329.1 510.6,333.6 505.3,329.1 496.5,325.9 480.4,329.9 472.3,331 460,339.8 453,348 425,343.2 418.7,341.1 404.4,345.4 394.5,354.5 381,363.4 372.6,376.2 375,392.6 372.9,395 352.1,387.7 348.3,379.9 326.6,345.2 317,342.9 310.7,343.8 305.2,353.6 289.6,343.9 285,331 276.5,323.5 269.5,315.5 249.9,313.9 249.1,319.8 217.1,316.9 177.3,296.8 177.4,294.1 152,292.7 148.6,280.7 140.6,274.8 133.2,268.5 118.4,259.8 118.8,251.7 109.6,234.5 106.7,222.4 102.4,210.5 97.7,197.1 95.3,176.8 100.9,165.6 100.4,145.8 108.5,129.8 114.9,103.4 115.4,90 113.9,81"37:[] 2d:{"title":"d3-force playground","cells":[{"id":0,"value":"md`# \\`\\`d3-force\\`\\` playground\n\nI originally made [this tutorial](https://observablehq.com/@ben-tanen/a-tutorial-to-using-d3-force-from-someone-who-just-learned-ho) on using \\`\\`d3-force\\`\\` and I mentioned the ability to make custom forces for all kinds of effects. I've since played around with a few minor ideas for forces, which you can check out below.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"node_data = [...Array(10)]\n .map(() => ({x: x(Math.min(Math.max(d3.randomNormal(0.5, 0.15)(), 0), 1)), \n y: y(Math.min(Math.max(d3.randomNormal(0.5, 0.15)(), 0), 1)),\n r: Math.max(3, d3.randomNormal(8, 5)())\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"md`----\n\n## Orbit`","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"viewof arrows1 = checkbox({\n options: [{value: \"y\", label: \"Show velocity arrows\"}],\n value: [\"y\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"viewof keyframe1 = sim_scrubber(1500);","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"md`\n---\n\n## Pulse cycle`","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"viewof arrows2 = checkbox({\n options: [{value: \"y\", label: \"Show velocity arrows\"}],\n value: [\"y\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"viewof keyframe2 = sim_scrubber(15000);","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"md`---\n\n## Random jitter`","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"viewof arrows3 = checkbox({\n options: [{value: \"y\", label: \"Show velocity arrows\"}],\n value: [\"y\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"viewof keyframe3 = sim_scrubber(1500);","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"md`---\n\n## Gravity bucket`","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"node_data2 = [...Array(50)]\n .map(() => ({x: x(Math.min(Math.max(d3.randomNormal(0.5, 0.15)(), 0), 1)), \n y: y(Math.min(Math.max(d3.randomNormal(0.5, 0.15)(), 0), 1)),\n r: Math.max(3, d3.randomNormal(10, 5)())\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"viewof arrows4 = checkbox({\n options: [{value: \"y\", label: \"Show velocity arrows\"}],\n value: [\"y\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"viewof keyframe4 = sim_scrubber(1500);","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"viewof keyframe5 = sim_scrubber(1500);","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"md`---\n\n## Slider filtering`","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"viewof n_nodes_slider = slider({\n min: 0,\n max: 100,\n step: 5,\n description: \"# of nodes (total)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"viewof n_filter_nodes_slider = slider({\n min: 0,\n max: n_nodes_slider,\n step: 1,\n description: \"# of nodes to filter\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"viewof show_filter_nodes_slider = checkbox({\n options: [{value: \"y\", label: \"Show to filter nodes\"}],\n value: [\"y\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"viewof filter_name = text({\n placeholder: \"...\", \n description: \"Text to show on filter\", \n submit: \"Update\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"viewof restart6 = Inputs.button(\"Restart\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"md`---\n\n## Drawing [WeePeople](https://github.com/propublica/weepeople) as nodes + highlighting the people within a polygon`","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"generateRandomString = (n) => {\n const characters = 'ABCDEFGHIJKLMNOPQRSUVWXYZabcdefghijklmnopqrsu';\n\n let result = ''; \n for (let i = 0; i < n; i++) {\n result += characters.charAt(Math.floor(Math.random() * characters.length));\n }\n \n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":574,"value":"polygon_points = polygon_points_str.split(\" \").map(d => d.split(\",\").map(e => +e))","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"chart_param = ({\n width: 500,\n height: 500,\n margin: {\n top: 10,\n right: 10,\n bottom: 10,\n left: 10,\n center: 150\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"draw_nodes = (svg, node_data, edge_data, w_r, w_l) => {\n \n let edge = null;\n if (edge_data) {\n edge = svg.selectAll(\".edge\")\n .data(edge_data).enter()\n .append(\"line\")\n .classed(\"edge\", true)\n .attr(\"x1\", d => node_data[d.source].x)\n .attr(\"y1\", d => node_data[d.source].y)\n .attr(\"x2\", d => node_data[d.target].x)\n .attr(\"y2\", d => node_data[d.target].y)\n .style(\"stroke\", w_l ? \"#bbb\" : \"none\");\n }\n \n const node = svg.selectAll(\".node\")\n .data(node_data).enter()\n .append(\"circle\")\n .classed(\"node\", true)\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", d => d.y)\n .attr(\"r\", d => w_r ? d.r : 8);\n \n return [node, edge];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"x = d3.scaleLinear()\n .domain([0, 1])\n .range([chart_param.margin.left, chart_param.width - chart_param.margin.right]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"y = d3.scaleLinear()\n .domain([0, 1])\n .range([chart_param.height - chart_param.margin.bottom, chart_param.margin.top]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"r = d3.scaleLinear()\n .domain([0, 1])\n .range([chart_param.margin.center, \n Math.min(chart_param.width / 2 - Math.max(chart_param.margin.left, chart_param.margin.right),\n chart_param.height / 2 - Math.max(chart_param.margin.top, chart_param.margin.bottom))]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"distance = ([x1, y1], [x2, y2]) => Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"sim_scrubber = (n_frames) => Scrubber(Array.from({length: n_frames}, (_, i) => i), {\n format: i => \"frame of simulation: \" + (i + 1),\n delay: 50,\n autoplay: false,\n loop: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"import {Scrubber} from '@mbostock/scrubber'","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"import { slider, button, select, text, radio, checkbox, number } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3@6\", \"d3-delaunay@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":570,"value":"geometric = require(\"geometric@2\");","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}