Transitioning between a sunburst and an icicle chart using Flubber.
forked from veltman's block: Sunburst to icicle
license: mit |
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> |
�PNG | |