Animate Donut Chart

Developed while working with WalletIQ, inspired by mbostock's Arc Tween example. Exiting arcs are first animated out, then existing arcs are updated, and finally entering arcs are animated in.

My main goal for this exercise was to learn D3.v4, and in particular its new way of working with selections and transitions. I definitely didn't have the time to carefully read through the new changes, and it's apparent in my implementation of the chained transitions; it's important to note that this doesn't seem like the best way of chaining transitions, since if at any point the animation does not occur the next animation does not trigger. In particular, the animations do not start for the first 2 seconds, because the exit animations does not happen and the rest are not triggered. I will experiment more in the future.

Another great thing to note: along with Mike's example that this is forked from, there are many other arcTween examples, among some are:

https://twitter.com/yonester/status/753771544627728384 https://twitter.com/FournaiseThomas/status/753893453688365058 https://twitter.com/micahstubbs/status/753865966283436032 https://twitter.com/veltman/status/753959910656868352

forked from mbostock's block: Arc Tween

<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="500"></svg>
<script src="//d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.11.2/lodash.js'></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
  
var pie = d3.pie()
	.sort(null)
	.value(function(d) {return d[1]});
var arc = d3.arc()
    .innerRadius(120)
    .outerRadius(150);

var allData = [
  [[1, 5], [2, 9], [3, 34], [4, 98], [5, 54]],
  [[4, 23], [9, 76], [2, 15], [10, 87], [7, 56], [5, 5], [6, 43]],
  [[3, 98], [2, 46], [7, 82]],
  [[7, 28], [6, 20], [5, 98], [2, 9], [4, 98]],
  [[4, 23], [8, 65], [10, 87], [6, 43], [1, 34], [3, 34]]
];
var prevData = [];
var data = [];
var index = 0;
var duration = 600;
var color = d3.scaleOrdinal(d3.schemePaired);

d3.interval(function() {
  index += 1;
  prevData = data;
  data = _.sortBy(allData[index % 5], function(d) {return d[0]});
  updatePie();
}, 2000);
</script>

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

https://d3js.org/d3-scale-chromatic.v1.min.js

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.11.2/lodash.js