31:T54e,chart = { // the default phyllotaxis arrangement is centered on <0,0> with a distance between nodes of ~10 pixels // we will scale & translate it to fit the canvas const scale = 0.5; const center = [width / 2, height / 2]; const rescale = isNaN(nodes[0].x); const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("background-color", "#FCF5ECa7"); const node = svg .append("g") .selectAll("circle") .data(nodes) .join("circle") .attr("r", 4) .attr("fill", (d) => d.color); const simulation = d3 .forceSimulation(nodes) .on("tick", tick) .force( "collide", d3.forceCollide((d) => d.r + d3.randomNormal(2.6, 1.2)()).iterations(2) ) .force("x", d3.forceX(center[0]).strength(0.001)) .force("y", d3.forceY(center[1]).strength(0.001)) .stop(); // differ application of the forces setTimeout(() => { simulation.restart(); node.transition().attr("r", (d) => d.r); }, 2000); // once the arrangement is initialized, scale and translate it if (rescale) { for (const node of nodes) { node.x = node.x * scale + center[0]; node.y = node.y * scale + center[1]; } } function tick() { node.attr("cx", (d) => d.x).attr("cy", (d) => d.y); } // show the initial arrangement tick(); return svg.node(); }32:[] 2f:{"title":"Redoing New Day painting by Paul Brach","cells":[{"id":0,"value":"# Redoing *New Day* painting by Paul Brach","pinned":false,"hidden":false,"mode":"md"},{"id":471,"value":"I saw this painting by Paul Branch on twitter the other day and thought it would be fun to recreate it, so, here I am, doing my best.","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"

Welcoming 2022 with New Day by Paul Brach. ☀️ pic.twitter.com/EWybU59A38
— Whitney Museum (@whitneymuseum) January 1, 2022

","pinned":false,"hidden":false,"mode":"html"},{"id":666,"value":"Code adapted from [this](https://observablehq.com/@d3/force-layout-phyllotaxis) Fil's notebook","pinned":false,"hidden":false,"mode":"md"},{"id":649,"value":"viewof replay = html`