2f:T76e,chart = { const root = pack(data); 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:T8f8,viewof source = { const textarea = html`

Midwest
 Michigan,10077331, #7c4ea5
 Ohio,11799448, #7c4ea5
 Illinois,12812508, #7c4ea5
 Nebraska,1961504, #7c4ea5
 Kansas,2937880, #7c4ea5
 Iowa,3190369, #7c4ea5
 Minnesota,5706494, #7c4ea5
 Wisconsin,5893718, #7c4ea5
 Missouri,6154913, #7c4ea5
 Indiana,6785528, #7c4ea5
 North Dakota,779094, #7c4ea5
 South Dakota,886667, #7c4ea5
Northeast
 Rhode Island,1097379, #5194c3
 Pennsylvania,13002700, #5194c3
 Maine,1362359, #5194c3
 New Hampshire,1377529, #5194c3
 New York,20201249, #5194c3
 Connecticut,3605944, #5194c3
 Vermont,643077, #5194c3
 Massachusetts,7029917, #5194c3
 New Jersey,9288994, #5194c3
South
 North Carolina,10439388, #f8c153
 Georgia,10711908, #f8c153
 West Virginia,1793716, #f8c153
 Florida,21538187, #f8c153
 Texas,29145505, #f8c153
 Mississippi,2961279, #f8c153
 Arkansas,3011524, #f8c153
 Oklahoma,3959353, #f8c153
 Kentucky,4505836, #f8c153
 Louisiana,4657757, #f8c153
 Alabama,5024279, #f8c153
 South Carolina,5118425, #f8c153
 Maryland,6177224, #f8c153
 District of Columbia,689545, #f8c153
 Tennessee,6910840, #f8c153
 Virginia,8631393, #f8c153
 Delaware,989948, #f8c153
West
 Montana,1084225, #53A796
 Hawaii,1455271, #53A796
 Idaho,1839106, #53A796
 New Mexico,2117522, #53A796
 Nevada,3104614, #53A796
 Utah,3271616, #53A796
 California,39538223, #53A796
 Oregon,4237256, #53A796
 Wyoming,576851, #53A796
 Colorado,5773714, #53A796
 Arizona,7151502, #53A796
 Alaska,733391, #53A796
 Washington,7705281, #53A796`;
  textarea.onkeypress = event => {
    if (event.key !== "Enter" || event.shiftKey || event.altKey || event.metaKey || event.ctrlKey) return;
    let i = textarea.selectionStart;
    let j = textarea.selectionEnd;
    let v = textarea.value;
    if (i === j) {
      let k = 0;
      while (i > 0 && v[--i - 1] !== "\n");
      while (i < j && v[i] === " ") ++i, ++k;
      textarea.value = v.substring(0, j) + "\n" + new Array(k + 1).join(" ") + v.substring(j);
      textarea.selectionStart = textarea.selectionEnd = j + k + 1;
      textarea.dispatchEvent(new CustomEvent("input"));
      event.preventDefault();
    }
  };
  textarea.oninput = () => {
    textarea.style.height = "initial";
    textarea.style.height = `${textarea.scrollHeight}px`;
  };
  yield textarea;
  textarea.oninput();
}31:[]
2d:{"title":"Packed circles: US state population by region","cells":[{"id":1,"value":"md`# Packed circles: US state population by region`","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"viewof rooted = {\n  const form = html`<form>\n  <label>\n    <input name=checkbox type=checkbox>\n    Show root circle\n  </label>\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`<form><label><input name=checkbox type=checkbox checked> Sort by value</label>`;\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":3,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"md`Each line in the textarea above represents a node in the tree. The depth of the node is determined by the number of leading spaces (the indentation): the root node has depth zero; its direct children have depth one; their children have depth two, and so on. The parent of each node is the closest preceding node with lesser depth.\n\nThe area of each node is determined by the number after the comma. You can also specify a fill color after the number. The contents of the textarea are interpreted as [CSV](https://en.wikipedia.org/wiki/Comma-separated_values), so put quotes around names if you want them to contain commas.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"data = cstParseRows(source, ([name, value, color = fillColor]) => ({\n  name, \n  value: value === undefined ? undefined : +value, \n  color\n}))","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`<style>\n\ntextarea {\n  display: block;\n  boxSizing: border-box;\n  width: calc(100% + 28px);\n  font: var(--monospace-font, var(--mono_fonts));\n  minHeight: 33px;\n  border: none;\n  padding: 4px 10px;\n  margin: 0 -14px;\n  background: rgb(247,247,249);\n  tabSize: 2;\n}\n\ntextarea:focus {\n  outline: none;\n}\n\n</style>`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}
</article></body></html>