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.
Last active
May 10, 2017 13:30
-
-
Save bricof/ebb8a73a41ca37955ab452bf99f68a76 to your computer and use it in GitHub Desktop.
Animated Arcs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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