2f:T7be,chart = { const root = d3.pack().size([width, height]).padding(3)( d3.hierarchy(data).sum((d) => d.value) ); const circle = d3 .arc() .innerRadius(0) .outerRadius((d) => d) .startAngle(-Math.PI) .endAngle(Math.PI); const svg = d3 .create("svg") .style("width", "100%") .style("height", "auto") .style("background", "#fff") .style("font", "10px sans-serif") .attr("text-anchor", "middle"); const node = svg .selectAll("g") .data( root .descendants() .slice(rooted ? 0 : 1) .reverse() ) .enter() .append("g") .attr("transform", (d) => `translate(${d.x + 1},${d.y + 1})`); node .append("path") .attr("id", (d) => (d.circleUid = DOM.uid("circle")).id) .attr("d", (d) => circle(d.r)); const internal = node.filter((d) => d.children); internal .select("path") .attr("stroke", (d) => d.data.color) .attr("fill", "none"); internal .append("text") .attr("dy", "-.4em") .attr("fill", "#555") .append("textPath") .attr("xlink:href", (d) => d.circleUid.href) .attr("startOffset", "50%") .text((d) => d.data.name); const leaf = node .filter((d) => !d.children) .attr("fill", (d) => d.data.color) .attr("fill-opacity", 0.5); leaf .append("text") .each((d) => { const { lines, radius } = fit( d.data.name, isNaN(d.data.value) ? undefined : format(d.data.value) ); d.lines = lines; if (!isNaN(d.data.value)) d.lines[d.lines.length - 1].value = true; }) .attr("fill", (d) => (d3.lab(d.data.color).l < 40 ? lightColor : darkColor)) .selectAll("tspan") .data((d) => d.lines) .enter() .append("tspan") .attr("x", 0) .attr("y", (d, i, data) => (i - data.length / 2 + 0.8) * 11) .text((d) => d.text) .filter((d) => d.value) .attr("font-weight", 300) .attr("fill-opacity", 0.6); return autosize(svg.node()); }30:[{"id":"46a57d841c395cf0e34c0f08a2ad16408995ccfed15f5f514a7c0670b205bd715ab48b60ca3f208840d84fa3c710cc2a1ba15eb4fe8f953b1e541afe6ea23661","href":"https://static.observableusercontent.com/files/46a57d841c395cf0e34c0f08a2ad16408995ccfed15f5f514a7c0670b205bd715ab48b60ca3f208840d84fa3c710cc2a1ba15eb4fe8f953b1e541afe6ea23661","name":"menu_observable_structure.json","type":"application/json","lastModified":1712095993598.541,"size":8080971},{"id":"25cd2aaf6c090f9f407b45c2e0b206b7e03f5d026f365ff7b6a93d8f97477dd4876d9d3f306775573cc3b77182620b4dd6d3372c775039c76ab03ee40abc5e27","href":"https://static.observableusercontent.com/files/25cd2aaf6c090f9f407b45c2e0b206b7e03f5d026f365ff7b6a93d8f97477dd4876d9d3f306775573cc3b77182620b4dd6d3372c775039c76ab03ee40abc5e27","name":"menu_observable_structure@1.json","type":"application/json","lastModified":1712097643764.688,"size":1207},{"id":"31406d253c399632dee092895650d39fa72b4ec9f65e68d4fa333a7b22949a04e3218dcc2c678cb45e5eabf7a5e75e65cff61c364117375d13f90f276a1f48ad","href":"https://static.observableusercontent.com/files/31406d253c399632dee092895650d39fa72b4ec9f65e68d4fa333a7b22949a04e3218dcc2c678cb45e5eabf7a5e75e65cff61c364117375d13f90f276a1f48ad","name":"menu_observable_structure@2.json","type":"application/json","lastModified":1712098394604.143,"size":720263},{"id":"48aa205a99ce544765f2cfecae75607a1c953f509bb8ae88bffd40ca3f45046b511280d12bac8884b6ab1d5dc8f0530b6d1f8508a3b20c4193aff2e76c4e94e8","href":"https://static.observableusercontent.com/files/48aa205a99ce544765f2cfecae75607a1c953f509bb8ae88bffd40ca3f45046b511280d12bac8884b6ab1d5dc8f0530b6d1f8508a3b20c4193aff2e76c4e94e8","name":"menu_observable_structure@3.json","type":"application/json","lastModified":1712100035870.222,"size":720263},{"id":"f68297f20e5e17b4c2ec1c8d58c74f2d5a2e280a92155c88c091df6dbcc531e671c310e77ac02f4a3aa7d33b7972f2c577408390030c8ab44865e29792dedfb9","href":"https://static.observableusercontent.com/files/f68297f20e5e17b4c2ec1c8d58c74f2d5a2e280a92155c88c091df6dbcc531e671c310e77ac02f4a3aa7d33b7972f2c577408390030c8ab44865e29792dedfb9","name":"menu_observable_structure@4.json","type":"application/json","lastModified":1712102336357.863,"size":215576},{"id":"c3b8c150ec0171d9c5e24aa62061993e0c4a636a945aef1806142e2fa1be3952122333eac9912cecf093347150a1fe4c8210b3e97e40b10182775c9ae8573d91","href":"https://static.observableusercontent.com/files/c3b8c150ec0171d9c5e24aa62061993e0c4a636a945aef1806142e2fa1be3952122333eac9912cecf093347150a1fe4c8210b3e97e40b10182775c9ae8573d91","name":"menu_observable_structure@5.json","type":"application/json","lastModified":1712102506948.38,"size":191561}] 2d:{"title":"Packed circles: Starbucks menu by category and product","cells":[{"id":1,"value":"md`# Packed circles: Starbucks menu by category and product`","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"viewof rooted = {\n const form = html`

\n \n \n Show root circle\n \n`;\n form.checkbox.onclick = () => {\n form.value = form.checkbox.checked;\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.value = form.checkbox.checked;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"viewof sorted = {\n const form = html` Sort by value`;\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":10,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"html`\n${DOM.download(await rasterize(chart), null, \"Download as PNG\")}\n${DOM.download(await serialize(chart), null, \"Download as SVG\")}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"data = FileAttachment(\"menu_observable_structure@5.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"pack = data => {\n const root = d3.hierarchy(data);\n root.sum(d => d.children ? 0 : isNaN(d.value) ? 1 : d.value);\n if (sorted) root.sort((a, b) => b.value - a.value);\n return d3.pack()\n .size([width - 2, height - 2])\n .padding(3)\n (root);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":326,"value":"format = d3.format(\".3s\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"height = 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":359,"value":"fillColor = \"#e4e4e4\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":362,"value":"lightColor = \"#fff\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":364,"value":"darkColor = \"#000\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":427,"value":"function autosize(svg) {\n document.body.appendChild(svg);\n const box = svg.getBBox();\n document.body.removeChild(svg);\n svg.setAttribute(\"viewBox\", `${box.x - 1} ${box.y - 1} ${box.width + 2} ${box.height + 2}`);\n return svg;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":464,"value":"import {fit, measureWidth} from \"@mbostock/bubble-o-matic\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"import {rasterize, serialize} from \"@mbostock/saving-svg\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":386,"value":"import {cstParseRows} from \"@mbostock/comma-separated-tree\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":456,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}