D3 Arc Chart & Tween

Using svg.arc to expirement with simple arcs & tweening Source: http://bl.ocks.org/mbostock/5100636

by Felipe Alfaro

HTML

<body>
</body>

JavaScript

var width = 350,
    height = 350,
    τ = 2 * Math.PI; // http://tauday.com/tau-manifesto

// An arc function with all values bound except the endAngle. So, to compute an
// SVG path string for a given angle, we pass an object with an endAngle
// property to the `arc` function, and it will return the corresponding string.
var arc = d3.svg.arc()
    .innerRadius((width / 2) - 40)
    .outerRadius(width / 2)
    .startAngle(0);
    
var arc_2 = d3.svg.arc()
    .innerRadius(50)
    .outerRadius(80)
    .startAngle(0);

// Create the SVG container, and apply a transform such that the origin is the
// center of the canvas. This way, we don't need to position arcs individually.
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  	.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")

// Add the background arc, from 0 to 100% (τ).
var background = svg.append("path")
    .datum({
    	endAngle: τ
    })
    .style("fill", "#ddd")
    .attr("d", arc);

// Add the foreground arc in orange, currently showing 12.7%.
var foreground_1 = svg.append("path")
    .datum({
    	endAngle: 0
    })
    .style("fill", "orange")
    .attr("d", arc);
    
var foreground_2 = svg.append("path")
    .datum({endAngle: 0})
    .style("fill", "green")
    .attr("d", arc);
    
var foreground_3 = svg.append("path")
    .datum({endAngle: 0})
    .style("fill", "red")
    .attr("d", arc_2);

// Every so often, start a transition to a new random angle. Use transition.call
// (identical to selection.call) so that we can encapsulate the logic for
// tweening the arc in a separate function below.
//setInterval(function() {
foreground_1.transition()
      .duration(750)
      .call(arcTween, .25 * τ);
      
foreground_2.transition()
      .duration(750)
      .call(arcTween, .2 * τ);
      
foreground_3.transition()
      .duration(750)
      .call(arcTween, .75 * τ);
//}, 1500);

setTimeout(function() {
 ...