30:T6f8,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", "1em") .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); 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 < 60 ? 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.5); return autosize(svg.node()); }31:T4c5,viewof source = { const textarea = html`

World
 Asia
  China,1409517397
  India,1339180127
  Indonesia,263991379
  Pakistan,197015955
  Bangladesh,164669751
  Japan,127484450
  Philippines,104918090
  Vietnam,95540800
 Europe
  Russia,143989754
  Germany,82114224
 Americas
  United States,324459463,#333
  Brazil,209288278
  Mexico,129163276
 Africa
  Nigeria,190886311
  Ethiopia,104957438
  Egypt,97553151`;
  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();
}32:[]
2e:{"title":"Pack-o-Matic","cells":[{"id":1,"value":"md`# Pack-o-Matic\n\nEdit the textarea below to update the chart!`","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":"$30","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":"$31","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(\",d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"height = 720","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":"$W32","stdlib":"1","titling":"auto"}
</article></body></html>