Voronoï <-> Rect treemap transition with flubber

This block experiments the use of @veltman's flubber d3 plugin in order to transition back and forth from a rectangular treemap to a Voronoï treemap (computed thanks to @kcnarf's d3-voronoi-treemap plugin).

Acknowledgments to :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>d3-voronoi-treemap</title>
    <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.3/seedrandom.min.js"></script>
    <script src="https://raw.githack.com/kcnarf/d3-weighted-voronoi/master/build/d3-weighted-voronoi.js"></script>
    <script src="https://rawcdn.githack.com/kcnarf/d3-voronoi-map/v1.2.0/build/d3-voronoi-map.js"></script>
    <script src="https://rawcdn.githack.com/kcnarf/d3-voronoi-treemap/v1.1.0/build/d3-voronoi-treemap.js"></script>
    <script src="https://unpkg.com/flubber@0.3.0"></script>
    <style>
      path {
        stroke: white;
        stroke-width: 1px;
      }
    </style>
  </head>
  <body>
    <svg></svg>
    <script>
var width = 960,
  height = 500,
  radius = 200;

var svg = d3
  .select("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + [width / 2 - radius, height / 2 - radius] + ")");

d3.json("globalEconomyByGDP.json", function(error, rootData) {
  if (error) throw error;

var hierarchy = d3.hierarchy(rootData).sum(function(d) {
    return d.weight;
  });

var rectangles = getRectangles(hierarchy),
    voronoi = getVoronoiPolygons(hierarchy);

var paired = d3
    .nest()
    .key(function(d) {
      return d.name;
    })
    .key(function(d) {
      return d.polygon ? "voronoi" : "rectangle";
    })
    .rollup(values => values[0])
    .object(voronoi.concat(rectangles));

var animationPairs = d3.values(paired).map(function(value) {
    return {
      color: value.voronoi.color,
      voronoi: value.voronoi,
      rectangle: value.rectangle,
      interpolator: flubber.fromRect(
        value.rectangle.x,
        value.rectangle.y,
        value.rectangle.width,
        value.rectangle.height,
        value.voronoi.polygon
      )
    };
  });

svg
    .selectAll("path")
    .data(animationPairs)
    .enter()
    .append("path")
    .style("fill", function(d) {
      return d.color;
    })
    .call(animate, true);
});

function getVoronoiPolygons(hierarchy) {
  //for reproducibility purpose, use a seedable pseudo random number generator
  var myseededprng = new Math.seedrandom('my seed'); // (from seedrandom's doc) Use "new" to create a local pprng without altering Math.random
  
  d3.voronoiTreemap().prng(myseededprng).clip(
    d3.range(0, 2 * Math.PI, Math.PI / 30).map(function(a) {
      return [
        radius + radius * Math.cos(a),
        radius + radius * Math.sin(a)
      ];
    })
  )(hierarchy);

return hierarchy.leaves().map(function(d) {
    return {
      name: d.data.name,
      polygon: d.polygon,
      color: d.parent.data.color
    };
  });
}

function getRectangles(hierarchy) {
  return d3.treemap().size([radius * 2, radius * 2])(hierarchy)
    .leaves()
    .map(function(d) {
      return {
        name: d.data.name,
        x: d.x0,
        y: d.y0,
        width: d.x1 - d.x0,
        height: d.y1 - d.y0
      };
    });
}

</script>
  </body>
</html>

Updated missing url https://raw.githack.com/Kcnarf/d3-weighted-voronoi/master/build/d3-weighted-voronoi.js to https://raw.githack.com/kcnarf/d3-weighted-voronoi/master/build/d3-weighted-voronoi.js

Updated missing url https://rawcdn.githack.com/Kcnarf/d3-voronoi-map/v1.2.0/build/d3-voronoi-map.js to https://rawcdn.githack.com/kcnarf/d3-voronoi-map/v1.2.0/build/d3-voronoi-map.js

Updated missing url https://rawcdn.githack.com/Kcnarf/d3-voronoi-treemap/v1.1.0/build/d3-voronoi-treemap.js to https://rawcdn.githack.com/kcnarf/d3-voronoi-treemap/v1.1.0/build/d3-voronoi-treemap.js

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

https://cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.3/seedrandom.min.js

https://raw.githack.com/Kcnarf/d3-weighted-voronoi/master/build/d3-weighted-voronoi.js

https://rawcdn.githack.com/Kcnarf/d3-voronoi-map/v1.2.0/build/d3-voronoi-map.js

https://rawcdn.githack.com/Kcnarf/d3-voronoi-treemap/v1.1.0/build/d3-voronoi-treemap.js

https://unpkg.com/flubber@0.3.0