Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active August 27, 2023 08:26
Show Gist options
  • Save mbostock/4341417 to your computer and use it in GitHub Desktop.
Save mbostock/4341417 to your computer and use it in GitHub Desktop.
Donut Transitions
license: gpl-3.0

This example demonstrates a complex chained transition for updating values in a donut chart, as considered by Robertson & Heer in Animated Transitions in Statistical Data Graphics. While fascinating to watch, users found the complicated transitions difficult to follow. For a simpler approach, see the Pie Chart Update series of examples.

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500,
outerRadius = Math.min(width, height) * .5 - 10,
innerRadius = outerRadius * .6;
var n = 10,
data0 = d3.range(n).map(Math.random),
data1 = d3.range(n).map(Math.random),
data;
var color = d3.scale.category20();
var arc = d3.svg.arc();
var pie = d3.layout.pie()
.sort(null);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.selectAll(".arc")
.data(arcs(data0, data1))
.enter().append("g")
.attr("class", "arc")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
.append("path")
.attr("fill", function(d, i) { return color(i); })
.attr("d", arc);
transition(1);
function arcs(data0, data1) {
var arcs0 = pie(data0),
arcs1 = pie(data1),
i = -1,
arc;
while (++i < n) {
arc = arcs0[i];
arc.innerRadius = innerRadius;
arc.outerRadius = outerRadius;
arc.next = arcs1[i];
}
return arcs0;
}
function transition(state) {
var path = d3.selectAll(".arc > path")
.data(state ? arcs(data0, data1) : arcs(data1, data0));
// Wedges split into two rings.
var t0 = path.transition()
.duration(1000)
.attrTween("d", tweenArc(function(d, i) {
return {
innerRadius: i & 1 ? innerRadius : (innerRadius + outerRadius) / 2,
outerRadius: i & 1 ? (innerRadius + outerRadius) / 2 : outerRadius
};
}));
// Wedges translate to be centered on their final position.
var t1 = t0.transition()
.attrTween("d", tweenArc(function(d, i) {
var a0 = d.next.startAngle + d.next.endAngle,
a1 = d.startAngle - d.endAngle;
return {
startAngle: (a0 + a1) / 2,
endAngle: (a0 - a1) / 2
};
}));
// Wedges then update their values, changing size.
var t2 = t1.transition()
.attrTween("d", tweenArc(function(d, i) {
return {
startAngle: d.next.startAngle,
endAngle: d.next.endAngle
};
}));
// Wedges reunite into a single ring.
var t3 = t2.transition()
.attrTween("d", tweenArc(function(d, i) {
return {
innerRadius: innerRadius,
outerRadius: outerRadius
};
}));
setTimeout(function() { transition(!state); }, 5000);
}
function tweenArc(b) {
return function(a, i) {
var d = b.call(this, a, i), i = d3.interpolate(a, d);
for (var k in d) a[k] = d[k]; // update data
return function(t) { return arc(i(t)); };
};
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment