Arc Animations

_.md

[ Launch: test ] 8be25608c15dee3b2766 by joannecheng
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"Arc Animations","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}

inlet.js

console.log("!!!");
var svg = d3.select("svg")

var arc = d3.svg.arc()
    .innerRadius(180)
    .outerRadius(240)
	.startAngle(0)

var colors = ['green', 'orange']
var angles = [
  {endAngle: 0.7 * Math.PI, className: 'good'},
  {endAngle: 0.2 * Math.PI, className: 'warning'}
] 

var g = svg.append('g')
	.attr('transform', 'translate(250, 250)')

var background = g
	.append("path")
	.datum({endAngle: 2 * Math.PI})
	.style("fill", "#000000")
	.attr("d", arc);

// use data, not datum
var foreground = g.selectAll('path.arcs')
	.data(angles).enter()
	.append("path")
	.attr('class', function(d) {
         return d.className;
	})
	.classed('arcs', true)
	.attr('fill', function(d, i) { return colors[i];})
	.attr("d", function(d) { return arc({endAngle: 0}); });

for (var i in angles) {
	g.select('path.'+angles[i].className)
	.transition()
	.duration(750)
	.call(arcTween, angles[i].endAngle);
}

function arcTween(transition, newAngle) {
  transition.attrTween("d", function(d) {
    
    // From d3 docs:
    // "an interpolator is a function that maps a parametric value
    // t in the domain [0,1] to a color, number or arbitrary value."
    
    // Note to Pat: if you'd like me to explain transitions, ping me on
    // on google hangout. It might take a while to explain with text.
    
	var interpolate = d3.interpolate( 1e-6 , newAngle);
  
	return function(t) {
		d.endAngle = interpolate(t);
		return arc(d);
   	};
 }); 
}