Skip to content

Instantly share code, notes, and snippets.

@bricof bricof/.block

Last active May 10, 2017
Embed
What would you like to do?
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
You can’t perform that action at this time.