2f:T592,chart = { const root = pack(data); const leaves = root.leaves().filter((d) => d.depth && d.value); const svg = d3 .create("svg") .style("width", "100%") .style("height", "auto") .style("background", "#fff") .style("font", "10px sans-serif") .attr("text-anchor", "middle"); svg .append("g") .attr("fill", fillColor) .selectAll("circle") .data(leaves) .enter() .append("circle") .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", (d) => d.r) .attr("fill", (d) => d.data.color) .attr("fill-opacity", 0.6); svg .append("g") .attr("pointer-events", "none") .selectAll("text") .data(leaves) .enter() .append("text") .attr("fill", (d) => (d3.lab(d.data.color).l < 60 ? lightColor : darkColor)) .attr("transform", (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; return `translate(${d.x},${d.y})`; }) .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()); }30:T7f6,viewof source = { const textarea = html`

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
 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
 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
 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.style.display = "block";
  textarea.style.boxSizing = "border-box";
  textarea.style.width = "calc(100% + 28px)";
  textarea.style.font = "var(--mono_fonts)";
  textarea.style.minHeight = "60px";
  textarea.style.border = "none";
  textarea.style.padding = "4px 10px";
  textarea.style.margin = "0 -14px";
  textarea.style.background = "rgb(247,247,249)";
  textarea.style.tabSize = 2;
  textarea.oninput = () => {
    textarea.style.height = "initial";
    textarea.style.height = `${textarea.scrollHeight}px`;
  };
  yield textarea;
  textarea.oninput();
}31:T44a,function fit(text, value) {
  let line;
  let lineWidth0 = Infinity;
  const lineHeight = 12;
  const targetWidth = Math.sqrt(measureWidth(text.trim()) * lineHeight);
  const words = text.split(/\s+/g); // To hyphenate: /\s+|(?<=-)/
  if (!words[words.length - 1]) words.pop();
  if (!words[0]) words.shift();
  const lines = [];
  for (let i = 0, n = words.length; i < n; ++i) {
    let lineText1 = (line ? line.text + " " : "") + words[i];
    let lineWidth1 = measureWidth(lineText1);
    if ((lineWidth0 + lineWidth1) * 0.4 < targetWidth) {
      line.width = lineWidth0 = lineWidth1;
      line.text = lineText1;
    } else {
      lineWidth0 = measureWidth(words[i]);
      line = {width: lineWidth0, text: words[i]};
      lines.push(line);
    }
  }
  if (value !== undefined) lines.push({width: measureWidth(value), text: value});
  let radius = 0;
  for (let i = 0, n = lines.length; i < n; ++i) {
    const dy = (Math.abs(i - n / 2 + 0.5) + 0.5) * lineHeight;
    const dx = lines[i].width / 2;
    radius = Math.max(radius, Math.sqrt(dx ** 2 + dy ** 2));
  }
  return {lines, radius};
}32:[]
2d:{"title":"Bubble chart: US state population/region","cells":[{"id":0,"value":"md`# Bubble chart: US state population/region`","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"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":3,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"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":9,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`Each line in the textarea above represents a bubble in the chart. The area of the circle 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":14,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"data = {\n  const data = d3.csvParseRows(source, ([name, value, color]) => ({name, value: !value || isNaN(value = +value) ? undefined : value, color}));\n  if (sorted) data.sort((a, b) => b.value - a.value);\n  return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"pack = data => {\n  let alt = d3.median(data, d => d.value);\n  if (!alt) alt = 1;\n  return d3.pack()\n      .size([width, height])\n      .padding(3)\n    (d3.hierarchy({children: data})\n      .sum(d => isNaN(d.value) ? alt : d.value));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"width = 954","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"height = 720","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"fillColor = \"#ddd\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"lightColor = \"#fff\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"darkColor = \"#000\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"format = d3.format(\".3s\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"measureWidth = {\n  const context = document.createElement(\"canvas\").getContext(\"2d\");\n  return text => context.measureText(text).width;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":187,"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":19,"value":"import {rasterize, serialize} from \"@mbostock/saving-svg\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}
</article></body></html>