D3 Examples - Animated Arcs

Animated Arcs

This little animation is used within the overview sneak-peek animation of the Stitch Fix Algorithms Tour. See Mike Bostock's heavily-commented Arc Tween example for an explanation of arc tweens in general. This animation is made only slightly more complex by the use of four arcs and by varying both the start and the end points.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<body>
​
<script src="https://d3js.org/d3.v4.min.js"></script>
​
<script>
​
var width = 960
    height = 500
​
var arc_colors = ["#F3A54A", "#AA7CAA", "#CCDE66", "#4B90A6"]
var inner_radius = 60
var radius_width = 10
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
​
var arc = d3.arc()
​
var data = []
for (var k=0; k<4; k++){
​
  var score = 0.7 * Math.random()
  var startAngle = Math.random() * 2 * Math.PI
  var endAngle = startAngle + score * 2 * Math.PI
  data.push({
          startAngle: startAngle,
          endAngle: endAngle,
          innerRadius: inner_radius + k * radius_width,
          outerRadius: inner_radius + (k + 1) * radius_width,
          fill: arc_colors[k]
        })
​
}
​
svg.selectAll("path").data(data).enter()
      .append("path")
      .style("fill", function(d){ return d.fill })
      .attr("d", arc);
​
d3.interval(function() {
  svg.selectAll("path").transition()
      .duration(2000)
      .attrTween("d", function(d){ return arcTween(d, 0.7 * Math.random()) })
}, 3000, -3000)
​
function arcTween(d, new_score) {
    var new_startAngle = Math.random() * 2 * Math.PI
    var new_endAngle = new_startAngle + new_score * 2 * Math.PI
    var interpolate_start = d3.interpolate(d.startAngle, new_startAngle)
    var interpolate_end = d3.interpolate(d.endAngle, new_endAngle)
    return function(t) {
      d.startAngle = interpolate_start(t)
      d.endAngle = interpolate_end(t)
      return arc(d)
    }
}
​
</script>
​
    