Sunburst to icicle

Transitioning between a sunburst and an icicle chart using Flubber.

forked from veltman's block: Sunburst to icicle

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/flubber@0.2.6"></script>
<script>

var width = 960,
    height = 500;

var x = d3.scaleLinear()
  .range([20 - width / 2, width / 2- 20]);

var y = d3.scaleLinear()
  .range([-height / 2 + 20, height / 2 - 20]);

var angle = d3.scaleLinear()
  .range([2 * Math.PI, 0])
  .clamp(true);

var radius = d3.scaleSqrt()
  .range([0, 225]);

var color = d3.scaleOrdinal(d3.schemeCategory20);

var partition = d3.partition();

var arc = d3.arc()
  .startAngle(d => angle(d.x0))
  .endAngle(d => angle(d.x1))
  .innerRadius(d => radius(d.y0))
  .outerRadius(d => radius(d.y1));

d3.json("https://gist.githubusercontent.com/mbostock/4348373/raw/85f18ac90409caa5529b32156aa6e71cf985263f/flare.json", function(err, root) {

var hierarchy = d3.hierarchy(root).sum(d => d.size);

var data = partition(hierarchy).descendants().map(function(node) {
    return {
      color: color((node.children ? node : node.parent).data.name),
      interpolator: flubber.toRect(
        arc(node),
        x(node.x0),
        y(node.y0),
        x(node.x1) - x(node.x0),
        y(node.y1) - y(node.y0),
        { maxSegmentLength: 2 }
      )
    };
  });

d3.select("svg").append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
    .selectAll("path")
    .data(data)
    .enter()
    .append("path")
    .attr("stroke", "#fff")
    .attr("fill", d => d.color)
    .call(animate);

});

function animate(sel, datum) {
  sel.transition()
    .duration(2000)
    .attrTween("d", d => d.interpolator)
    .transition()
    .duration(2000)
    .attrTween("d", d => t => d.interpolator(1 - t))
    .on("end", (d, i) => i || sel.call(animate));
}
</script>

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

https://unpkg.com/flubber@0.2.6