30:[] 2e:{"title":"Clustered Bubbles","cells":[{"id":0,"value":"md`# Clustered Bubbles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"viewof n = {\n const form = html``;\n form.i.oninput = () => form.value = form.i.valueAsNumber;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"viewof m = {\n const form = html``;\n form.i.oninput = () => form.value = form.i.valueAsNumber;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"viewof grouped = {\n const form = html`

Show cluster circles`;\n form.checkbox.onclick = () => (form.value = form.checkbox.checked, form.dispatchEvent(new CustomEvent(\"input\")));\n form.value = form.checkbox.checked;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"chart = {\n const root = pack();\n\n const svg = d3.select(DOM.svg(width, height));\n\n if (grouped) svg.append(\"g\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#ccc\")\n .selectAll(\"circle\")\n .data(root.descendants().filter(d => d.height === 1))\n .join(\"circle\")\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", d => d.y)\n .attr(\"r\", d => d.r);\n\n svg.append(\"g\")\n .selectAll(\"circle\")\n .data(root.leaves())\n .join(\"circle\")\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", d => d.y)\n .attr(\"r\", d => d.r)\n .attr(\"fill\", d => color(d.data.group));\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"pack = () => d3.pack()\n .size([width, height])\n .padding(1)\n (d3.hierarchy(data)\n .sum(d => d.value))","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"data = ({\n children: Array.from(\n d3.group(\n Array.from({length: n}, (_, i) => ({\n group: Math.random() * m | 0,\n value: -Math.log(Math.random())\n })),\n d => d.group\n ),\n ([, children]) => ({children})\n )\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"color = d3.scaleOrdinal(d3.range(m), d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}