arc tween example

<html>
<body>
<head>
  <style type="text/css">
  .bg-circle{
    fill: #ddd;
    stroke: none;
  }
  .progress-bar{
    fill: #000;
    stroke: none;
  }
  .complete{
    transition: fill .7s;
    fill: orange;
  }
  </style>
</head>

var width = 200,
    height = 200,
    tau = 2 * Math.PI;

var arc = d3.svg.arc()
    .innerRadius(50)
    .outerRadius(100)
    .startAngle(0);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")

// complete
var bg = svg.append("path")
    .datum({ endAngle: tau })
    .attr('class', 'bg-circle')
    .attr("d", arc);

var pctOfGoal = 1
// 50% = .5

var progressArc = svg.append('path')
  .datum({ endAngle: 0 * tau })
  .attr('d', arc)
  .attr('class', 'progress-bar')
  .attr('d', arc)

var arcTween = function(transition, newEndAngle){
  transition.attrTween('d', function(d){
    var interpolate = d3.interpolate(d.endAngle, newEndAngle);

return function(t){
      d.endAngle = interpolate(t)
      return arc(d)
    }
  })
}

progressArc
  .transition()
  .duration(1000)
  .call(arcTween, pctOfGoal * tau)
  .each('end', function(d){
    if(pctOfGoal == 1){
      d3.select(this).classed('complete', true)
    }
  })

</script>

</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

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