30:T553,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); 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()); }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:[] 2e:{"title":"Bubble-o-Matic","cells":[{"id":0,"value":"md`# Bubble-o-Matic\n\nEdit the textarea below to update the chart!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"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":3,"value":"$30","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":"viewof source = {\n const textarea = html`

China,1409517397\nIndia,1339180127\nUnited States,324459463,#333\nIndonesia,263991379\nBrazil,209288278\nPakistan,197015955\nNigeria,190886311\nBangladesh,164669751\nRussia,143989754\nMexico,129163276\nJapan,127484450\nEthiopia,104957438\nPhilippines,104918090\nEgypt,97553151\nVietnam,95540800\nGermany,82114224`;\n  textarea.style.display = \"block\";\n  textarea.style.boxSizing = \"border-box\";\n  textarea.style.width = \"calc(100% + 28px)\";\n  textarea.style.font = \"var(--mono_fonts)\";\n  textarea.style.minHeight = \"60px\";\n  textarea.style.border = \"none\";\n  textarea.style.padding = \"4px 10px\";\n  textarea.style.margin = \"0 -14px\";\n  textarea.style.background = \"rgb(247,247,249)\";\n  textarea.style.tabSize = 2;\n  textarea.oninput = () => {\n    textarea.style.height = \"initial\";\n    textarea.style.height = `${textarea.scrollHeight}px`;\n  };\n  yield textarea;\n  textarea.oninput();\n}","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(\",d\")","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>