28:null 29:["$","title",null,{"children":"Clustered Bubbles | Mike Bostock | Observable"}] 2e:[] 2c:{"id":"851ae3915f61d356","slug":"clustered-bubbles","title":"Clustered Bubbles","thumbnail":"859fce38a7240cbb312681cb78ea6c6681afa4f26f114af80f0086fdfd42a84b","access_level":"public","create_time":"$D2019-02-08T17:48:35.109Z","update_time":"$D2019-02-09T17:53:32.089Z","view_time":null,"first_public_time":"$D2019-02-08T18:52:57.796Z","has_unpublished_edits":null,"fork":false,"stars":24,"starred":false,"owner":{"type":"team","id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":"pro_2026"},"version":100,"publish_version":100,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":37,"collection":null,"type":"notebook","body":{"title":"Clustered Bubbles","cells":[{"id":0,"value":"md`# Clustered Bubbles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"color = d3.scaleOrdinal(d3.range(m), d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2d:"$2c:body"