Animated Fractal Pie Chart

An iteration on Fractal Pie Chart where the scaling is done using transforms (so the outline thickness also decreases with depth) and with animation. This variation violates the condition that the area of each child should be equal to the area of the parent slice, for the sake of pretty appearance. This variation also has loads more pies, for the real "fractal effect"!

This is a stop along the way for trying to actually visualize data with this technique. The main problem with the first iteration is that pies overlap each other. This experiment shows that to minimize overlap, it looks like setting the largest slice at a 45 degree angle minimizes overlap.

Uses d3-component.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/d3@4"></script>
  <script src="https://unpkg.com/d3-component@3"></script>
</head>
<body style="margin: 0">
  <svg width="960" height="500"></svg>
  <script>
    const svg = d3.select("svg");
    const width = +svg.attr("width");
    const height = +svg.attr("height");
    const pie = d3.pie().value(d => d.value);
    const outerRadius = 100;
    const scalingFactor = 1.188096;
    const stemWeight = 0.25;
    const stemLength = 74;
    const epsilon = 0.001;
    const arc = d3.arc()
      .innerRadius(0)
      .outerRadius(outerRadius);

const slice = d3.component("path")
      .render((selection, d) => {
        selection
          .attr("d", arc(d))
          .attr("fill", "#efefef")
          .attr("stroke", "#707070")
          .attr("stroke-width", 6)
          .attr("stroke-linejoin", "round");
      });

const fractal = d3.component("g")
      .render((selection, d) => {
        const {
          angle,
          children,
          sliceFraction,
          stem
        } = d;

d3.select("svg").append("g")
        .attr("transform", "translate(313, 245)")
        .call(fractal, data, {
          sliceFraction: 1
        });

</script>
</body>

https://unpkg.com/d3@4

https://unpkg.com/d3-component@3