Fil/.block

## .block
license: mit

## README.md

      
    Raw
  

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

  
## index.html
<!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>

<body>

  <svg width=975 height=975 />

  <script>


(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>
	<!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>

	<body>

	<svg width=975 height=975 />

	<script>


	(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>