31:T714,function pack(circles, _width, _height) { const n = circles.length; if (!n) return circles; let a, b, c; // Place the first circle. a = circles[0], a.x = 0, a.y = 0; if (!(n > 1)) return circles; // Place the second circle. b = circles[1], a.x = -b.r, b.x = a.r, b.y = 0; if (!(n > 2)) return circles; // Place the third circle. place(b, a, c = circles[2]); // Initialize the front-chain using the first three circles a, b and c. a = new Node(a), b = new Node(b), c = new Node(c); a.next = c.previous = b; b.next = a.previous = c; c.next = b.previous = a; // Attempt to place each remaining circle… pack: for (let i = 3; i < n; ++i) { place(a._, b._, c = circles[i]), c = new Node(c); // Find the closest intersecting circle on the front-chain, if any. // “Closeness” is determined by linear distance along the front-chain. // “Ahead” or “behind” is likewise determined by linear distance. let j = b.next, k = a.previous, sj = b._.r, sk = a._.r; do { if (sj <= sk) { if (intersects(j._, c._)) { b = j, a.next = b, b.previous = a, --i; continue pack; } sj += j._.r, j = j.next; } else { if (intersects(k._, c._)) { a = k, a.next = b, b.previous = a, --i; continue pack; } sk += k._.r, k = k.previous; } } while (j !== k.next); // Success! Insert the new circle c between a and b. c.previous = a, c.next = b, a.next = b.previous = b = c; // Compute the new closest circle pair to the centroid. let aa = scoreRectangle(a, _width, _height), ca; while ((c = c.next) !== b) { if ((ca = score(c, _width, _height)) < aa) { a = c, aa = ca; } } b = a.next; } return circles; }32:[] 2f:{"title":"Packing Circles inside a Rectangle with params","cells":[{"id":0,"value":"md`# Packing Circles inside a Rectangle with params\n\nExpanding @mbostock original observable to add width and height parameters to the packing function\n\nExploring a variant on Wang et al.’s [circle-packing algorithm](https://github.com/d3/d3-hierarchy/blob/master/README.md#pack).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"viewof n = {\n const form = html``;\n form.oninput = () => form.value = form.i.valueAsNumber;\n form.value = form.i.valueAsNumber;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"viewof containerw = {\n const form = html``;\n form.oninput = () => form.value = form.i.valueAsNumber;\n form.value = form.i.valueAsNumber;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"viewof containerh = {\n const form = html``;\n form.oninput = () => form.value = form.i.valueAsNumber;\n form.value = form.i.valueAsNumber;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"viewof score = {\n const form = html``;\n form.oninput = () => form.value = [scoreRectangle, scoreCircle][form.i.selectedIndex];\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"{\n const circles = pack(Array.from({length: n}, () => ({r: 1 + Math.random() * 10})), containerw, containerh);\n // const root = html`