[unlisted] WIP Mushroom Chart

Data from World Countries Hierarchy and United Nations Population Estimates 2015, year 2017 extract.

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.

forked from curran's block: Animated Fractal Pie Chart

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