2f:[] 2d:{"title":"Untitled","cells":[{"id":0,"value":"# Untitled","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"canvas = {\n const canvas = document.createElement(\"canvas\");\n canvas.width = width * devicePixelRatio;\n canvas.height = height * devicePixelRatio;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n const ctx = canvas.getContext(\"2d\");\n\n ctx.fillStyle = \"#000000\";\n\n for (const rect of tree.leaves()) {\n ctx.fillRect(\n rect.x0,\n rect.y0,\n rect.x1 - rect.x0,\n rect.y1 - rect.y0\n );\n }\n\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"viewof width = {\n const form = html``;\n form.i.oninput = () =>\n (form.o.value = `${(form.value = form.i.valueAsNumber)}px width`);\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"viewof height = {\n const form = html``;\n form.i.oninput = () =>\n (form.o.value = `${(form.value = form.i.valueAsNumber)}px height`);\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"tree = treemap(hierarchicalData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"treemap = d3\n .treemap()\n .tile(d3.treemapBinary)\n .size([width * devicePixelRatio, height * devicePixelRatio])\n .padding(devicePixelRatio)\n .round(true)","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"hierarchicalData = d3\n .hierarchy(data)\n .sum((d) => d.value)\n .sort((a, b) => b.value - a.value)","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"hierarchicalData2 = d3\n .hierarchy(data)\n .sum((d) => d.value)\n .sort((a, b) => b.value - a.value)","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"data = ({\n name: \"test\",\n children: [\n { name: \"A\", value: 10 },\n { name: \"B\", value: 100 },\n { name: \"C\", value: 25 },\n { name: \"D\", value: 10 },\n { name: \"E\", value: 2 }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}