D3 Examples - Voronoï <-> Rect treemap transition with flubber

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 :
xxxxxxxxxx
 
<!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 animate(cells, direction) {
  cells
    .attr("d", function(d) {
      return d.interpolator(direction ? 0 : 1);
    })
    .transition()
    .delay(500)
    .duration(1000)
    .attrTween("d", function(d) {
      return direction
        ? d.interpolator
        : function(t) {
            return d.interpolator(1 - t);
          };
    })
    .filter(function(d, i) {
      return !i;
    })
    .on("end", function() {
      cells.call(animate, !direction);
    });
}
​
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>
​
    