Skip to content

Instantly share code, notes, and snippets.

@bricof
Last active May 10, 2017 13:30
Show Gist options
  • Save bricof/ebb8a73a41ca37955ab452bf99f68a76 to your computer and use it in GitHub Desktop.
Save bricof/ebb8a73a41ca37955ab452bf99f68a76 to your computer and use it in GitHub Desktop.
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.

<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment