2f:T5a3,chart = { const root = pack(data); const leaves = root.leaves().filter((d) => d.depth && d.value); const svg = d3 .create("svg") .style("width", "60%") .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 < 40 ? lightColor : darkColor)) .attr("transform", (d) => { const { lines, radius } = fit( d.data.name, isNaN(d.data.value) ? undefined : format(d.data.value).replace("G", "B") ); 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:T476,viewof source = { const textarea = html`

2001,2359000000.0, #cfbde0
2002,2705000000.0, #cfbde0
2003,1045000000.0, #cfbde0
2004,163000000.0, #cfbde0
2007,2602000000.0, #cfbde0
2008 (25 failures),373589000000.0, #cfbde0
2009,170909000000.0, #cfbde0
2010,96514000000.0, #cfbde0
2011,36012000000.0, #cfbde0
2012,12056000000.0, #cfbde0
2013,6102000000.0, #cfbde0
2014,3088000000.0, #cfbde0
2015,6728000000.0, #cfbde0
2016,279000000.0, #cfbde0
2017,6531000000.0, #cfbde0
2019,214000000.0, #cfbde0
2020,458000000.0, #cfbde0
2023 (1 failure),209000000000.0, #7c4ea5
`;
  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: Total assets in banks that failed, by year.","cells":[{"id":0,"value":"md`# Bubble chart: Total assets in banks that failed, by year. \n\nSource: [FDIC](https://www.fdic.gov/bank/historical/bank/)`","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 = 780","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"height = 500","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(\"$.2s\")","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>