3e:null 3f:["$","title",null,{"children":"India States Population | ddamle | Observable"}] 45: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()); }46:T523,viewof source = { const textarea = html`

Uttar Pradesh,199812341
Maharashtra,112374333
Bihar,104099452
West Bengal,91276115
Andhra Pradesh,84580777
Madhya Pradesh,72626809
Tamil Nadu,72147030
Rajasthan,68548437
Karnataka,61095297
Gujarat,60439692
Orissa,41974218
Kerala,33406061
Jharkhand,32988134
Assam,31205576
Punjab,27743338
Chhattisgarh,25545198
Haryana,25351462
Delhi,16787941
Jammu and Kashmir,12541302
Uttarakhand,10086292
Himachal Pradesh,6864602
Tripura,3673917
Meghalaya,2966889
Manipur,2855794
Nagaland,1978502
Goa,1458545
Arunachal Pradesh,1383727
Puducherry,1247953
Mizoram,1097206
Chandigarh,1055450
Sikkim,610577
Andaman and Nicobar Islands,380581
Dadra and Nagar Haveli,343709
Daman and Diu,243247
Lakshadweep,64473`;
  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();
}47: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};
}48:[]
43:{"id":"d6e1a771d5a38021","slug":null,"title":"India States Population","thumbnail":"5ea057d77aaafdfb2483a6fefe037d6c83027721b7dffa962f3a006509218231","access_level":"public","create_time":"$D2023-12-13T15:03:12.066Z","update_time":"$D2023-12-14T14:36:24.073Z","view_time":null,"first_public_time":"$D2023-12-13T15:03:12.066Z","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":"f2f4f6fe02757cb3","login":"ddamle","name":"","avatar_url":"https://avatars-next.observableusercontent.com/6125954ebef3294976e72d25d67934f02946eab323c21cca881761f3acefe5b9","tier":"starter_2024","bio":"I am Naraina Damle, 65, freelancer based in India. Passionate about CAD, 3d Modeling, GIS and cartography","following":false},"version":227,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0719fb7133972624","login":"ddamle","name":"","avatar_url":"https://avatars-next.observableusercontent.com/6125954ebef3294976e72d25d67934f02946eab323c21cca881761f3acefe5b9","tier":null,"bio":"I am Naraina Damle, 65, freelancer based in India. Passionate about CAD, 3d Modeling, GIS and cartography","following":false}],"members":[{"type":"individual","id":"0719fb7133972624","login":"ddamle","name":"","avatar_url":"https://avatars-next.observableusercontent.com/6125954ebef3294976e72d25d67934f02946eab323c21cca881761f3acefe5b9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"India States Population","cells":[{"id":0,"value":"<h1>India States Population</h1>\n\nEdit the textarea below to update the chart!`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":"$45","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":"$46","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":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":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 = 954","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"height = 720","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"fillColor = \"#ddd\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"lightColor = \"#fff\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"darkColor = \"#000\"","pinned":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"$47","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":true,"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":true,"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":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}}
44:"$43:body"
</article></body></html>