3f:null 40:["$","title",null,{"children":"Bubble-o-Matic | Marisa Prasse | Observable"}] 46: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()); }47:T600,viewof source = { //FY2003 Data const textarea = html`

Ukraine, 5056
Liberia, 2956
Iran,	2471
Sudan,	2139
Somalia,	1982
Serbia,	1801
Ethiopia,	1702
Vietnam,	1472
Afghanistan,	1453
Russia,	1396
Sierra Leone,	1378
Belarus,	702
Moldova,	616
Bosnia and Herzegovina,	506
Azerbaijan,	406
Cuba,	305
Iraq,	298
Dem. Rep. Congo,	251
Burma,	203
Uzbekistan,	166
Colombia,	149
Croatia,	144
Kazakhstan,	116
Armenia,	63
Nigeria,	57
Georgia,	53
Latvia,	49
Rwanda,	47
Togo,	47
Kyrgyzstan,	46
Congo,	41
Yugoslavia,	38
Estonia,	28
Eritrea,	23
Lithuania,	21
Angola,	21
Pakistan,	18
Indonesia,	17
Burundi,	16
Macedonia,	13
Laos,	13
Tajikistan,	13
Gambia,	9
China,	9
Ghana,	8
Cambodia,	7
Sri Lanka (Ceylon),	7
Cameroon,	6
Algeria,	4
Ivory Coast,	4
Turkmenistan,	4
Syria,	3
Equatorial Guinea,	3
Kenya,	3
Thailand,	2
Albania,	2
Benin,	2
Israel,	2
Guinea,	2
Lebanon,	2
Zambia,	1
Philippines,	1
Bangladesh,	1
Uganda,	1
France,	1
Chad,	1
Central African Republic,	1
Yemen (Sanaa),	1
Slovakia,	1
Djibouti,	1
`;
  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 = `${textarea.value.match(/^/gm).length * 21 + 8}px`;
  textarea.oninput();
  return textarea;
}48:T55d,chart2 = {
  const root = pack(data2);
  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.data2.color);

svg.append("g")
      .attr("pointer-events", "none")
    .selectAll("text")
    .data(leaves)
    .enter().append("text")
      .attr("fill", d => d3.lab(d.data2.color).l < 60 ? lightColor : darkColor)
      .attr("transform", d => {
        const {lines, radius} = fit(d.data2.name, isNaN(d.data2.value) ? undefined : format(d.data2.value));
        d.lines = lines;
        if (!isNaN(d.data2.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, data2) => (i - data2.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());
}49:T601,viewof source2 = { //FY2003 Data
  const textarea = html`<textarea>Ukraine, 5056
Liberia, 2956
Iran,	2471
Sudan,	2139
Somalia,	1982
Serbia,	1801
Ethiopia,	1702
Vietnam,	1472
Afghanistan,	1453
Russia,	1396
Sierra Leone,	1378
Belarus,	702
Moldova,	616
Bosnia and Herzegovina,	506
Azerbaijan,	406
Cuba,	305
Iraq,	298
Dem. Rep. Congo,	251
Burma,	203
Uzbekistan,	166
Colombia,	149
Croatia,	144
Kazakhstan,	116
Armenia,	63
Nigeria,	57
Georgia,	53
Latvia,	49
Rwanda,	47
Togo,	47
Kyrgyzstan,	46
Congo,	41
Yugoslavia,	38
Estonia,	28
Eritrea,	23
Lithuania,	21
Angola,	21
Pakistan,	18
Indonesia,	17
Burundi,	16
Macedonia,	13
Laos,	13
Tajikistan,	13
Gambia,	9
China,	9
Ghana,	8
Cambodia,	7
Sri Lanka (Ceylon),	7
Cameroon,	6
Algeria,	4
Ivory Coast,	4
Turkmenistan,	4
Syria,	3
Equatorial Guinea,	3
Kenya,	3
Thailand,	2
Albania,	2
Benin,	2
Israel,	2
Guinea,	2
Lebanon,	2
Zambia,	1
Philippines,	1
Bangladesh,	1
Uganda,	1
France,	1
Chad,	1
Central African Republic,	1
Yemen (Sanaa),	1
Slovakia,	1
Djibouti,	1
`;
  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 = `${textarea.value.match(/^/gm).length * 21 + 8}px`;
  textarea.oninput();
  return textarea;
}4a: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};
}4b:[]
44:{"id":"c286a4653629f13b","slug":"bubble-o-matic","title":"Bubble-o-Matic","thumbnail":"64f46c7be58388c34d335f6cff8a38688cf771912c42da8b14fd1d1a47577f2a","access_level":"public","create_time":"$D2019-05-06T14:21:30.186Z","update_time":"$D2019-05-08T22:23:03.059Z","view_time":null,"first_public_time":"$D2019-05-08T15:38:14.343Z","has_unpublished_edits":null,"fork":{"id":"71cf6720f671feea","slug":"bubble-o-matic","title":"Bubble-o-Matic","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1360890477959640","login":"mprasse","name":"Marisa Prasse","avatar_url":"https://avatars-next.observableusercontent.com/c05e20b388c0091a3c669bab1c33d8b04533fd9e53981cc498590023fd593999","tier":"starter_2024","bio":"","following":false},"version":213,"publish_version":213,"role":null,"authored":false,"authors":[{"type":"individual","id":"0f7346b3775fd443","login":"mprasse","name":"Marisa Prasse","avatar_url":"https://avatars-next.observableusercontent.com/c05e20b388c0091a3c669bab1c33d8b04533fd9e53981cc498590023fd593999","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"0f7346b3775fd443","login":"mprasse","name":"Marisa Prasse","avatar_url":"https://avatars-next.observableusercontent.com/c05e20b388c0091a3c669bab1c33d8b04533fd9e53981cc498590023fd593999","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"data2 = {\n  const data = d3.csvParseRows(source2, ([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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"width = 964","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"height = 720","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"fillColor = \"#ddd\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"lightColor = \"#fff\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"darkColor = \"#000\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"format = d3.format(\",d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"measureWidth = {\n  const context = document.createElement(\"canvas\").getContext(\"2d\");\n  return text => context.measureText(text).width;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"import {rasterize, serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}}
45:"$44:body"
</article></body></html>