milbal

Quarto

chart = {
  const root = pack(data);

  const svg = d3.create("svg")
      .attr("viewBox", [0, 0, width, height])
      .style("font", "10px sans-serif")
      .style("overflow", "visible")
      .attr("text-anchor", "middle");

  const node = svg.append("g")
      .attr("pointer-events", "all")
    .selectAll("g")
    .data(root.descendants().slice(1))
    .join("g")
      .attr("transform", d => `translate(${d.x},${d.y})`);

  node.append("path")
      .attr("id", d => (d.circleUid = DOM.uid("circle")).id)
      .attr("d", d => circle(d.r + 3))
      .attr("display", "none");

  node.append("circle")
      .attr("r", d => d.r)
      .attr("stroke", d => d.height > 1 ? "#ccc" : null)
      .attr("fill", d => d.children ? "none" : "currentColor")
      .attr("pointer-events", d => d.children ? "all" : "none");

  node.filter(d => d.children).append("text")
      .attr("fill", "#555")
    .append("textPath")
      .attr("xlink:href", d => d.circleUid.href)
      .attr("startOffset", "50%")
      .text(d => d.data.name);

  node.filter(d => d.height).append("title")
      .text(d => `${d.ancestors().slice(0, -1).map(d => d.data.name).reverse().join(", ").replace(/[¹²](?!$)/g, "")}
$${d.value.toLocaleString("en")} billion`);

  return svg.attr("viewBox", autoBox).node();
}

circle = d3.arc()
    .innerRadius(0)
    .outerRadius(d => d)
    .startAngle(-Math.PI)
    .endAngle(Math.PI)
    
pack = data => d3.pack()
    .size([width, height])
    .padding(d => d.height === 1 ? 4 : 20)
  (d3.hierarchy(data)
    .sum(d => d.value)
    .sort((a, b) => b.value - a.value))

function autoBox() {
  document.body.appendChild(this);
  const {x, y, width, height} = this.getBBox();
  document.body.removeChild(this);
  return [x, y, width, height];
}

data = d3.cstParseRows(await FileAttachment("cares@2.cst").text(), ([name, value]) => ({name, ...(value === undefined ? undefined : {children: Array.from({length: Math.round(value)}, (_, i) => ({name: "", value: 1 /* Math.min(1, value - i) */ }))})}))

width = 1024
height = width
d3 = require("d3@5", "cstree@0.0")