circle packing [UNLISTED]

ported from https://observablehq.com/@d3/circle-packing

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

(async function() {
  
    
    const data = await d3.json("https://raw.githubusercontent.com/d3/d3-hierarchy/v1.1.8/test/data/flare.json");

const color = d3.scaleSequential([8, 0], d3.interpolateMagma),
      format = d3.format(",d"),
      width = 975,
      height = width;
           
   const pack = data => d3.pack()
    .size([width - 2, height - 2])
    .padding(3)
  (d3.hierarchy(data)
    .sum(d => d.value)
    .sort((a, b) => b.value - a.value))

function chart() {
  const root = pack(data);

const svg = d3.select("svg")
      .style("font", "10px sans-serif")
      .style("width", "100%")
      .style("height", "auto")
      .attr("text-anchor", "middle");

svg.append("filter")
      .attr("id", "shadow")
    .append("feDropShadow")
      .attr("flood-opacity", 0.3)
      .attr("dx", 0)
      .attr("dy", 1);

const node = svg.selectAll("g")
    .data(d3.nest().key(d => d.height).entries(root.descendants()))
    .join("g")
      .attr("filter", "url(#shadow)")
    .selectAll("g")
    .data(d => d.values)
    .join("g")
      .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`);

node.append("circle")
      .attr("r", d => d.r)
      .attr("fill", d => color(d.height));

const leaf = node.filter(d => !d.children);
  
  leaf.select("circle")
      .attr("id", (d,i) => (d.leafUid = "leaf"+i));

leaf.append("clipPath")
      .attr("id", (d,i) => (d.clipUid = "clip"+i))
    .append("use")
      .attr("xlink:href", (d,i) => `#${d.leafUid}`);

leaf.append("text")
      .attr("clip-path", (d,i) => `url(#${d.clipUid})`)
    .selectAll("tspan")
    .data(d => d.data.name.split(/(?=[A-Z][^A-Z])/g))
    .join("tspan")
      .attr("x", 0)
      .attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`)
      .text(d => d);

node.append("title")
      .text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`);
    
  return svg.node();
}
    
   
    chart()

})();

</script>
</body>

https://d3js.org/d3.v5.min.js