Double Pie Chart

<!DOCTYPE html>
<html>
 <head>
   <title>Pie Chart</title>
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.3.0/d3.js"></script>
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.3.0/d3.layout.js"></script>
   <style type="text/css">

body {
 font: 10px sans-serif;
}

</style>
 </head>
 <body>
   <script type="text/javascript">

var w = 200,
   h = 200,
   r = Math.min(w, h) / 2,
   data = d3.range(10).map(Math.random),
   color = d3.scale.category20(),
   arc = d3.svg.arc().outerRadius(r),
   donut = d3.layout.pie();

var vis = d3.select("body")
 .append("svg:svg")
   .data([data.sort(d3.descending)])
   .attr("width", w)
   .attr("height", h);

var arcs = vis.selectAll("g.arc")
   .data(donut)
 .enter().append("svg:g")
   .attr("class", "arc")
   .attr("transform", "translate(" + r + "," + r + ")");

var paths = arcs.append("svg:path")
   .attr("fill", function(d, i) { return color(i); });

paths.transition()
   .ease("bounce")
   .duration(2000)
   .attrTween("d", tweenPie);

paths.transition()
   .ease("elastic")
   .delay(function(d, i) { return 2000 + i * 50; })
   .duration(750)
   .attrTween("d", tweenDonut);

function tweenPie(b) {
 b.innerRadius = 0;
 var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
 return function(t) {
   return arc(i(t));
 };
}

function tweenDonut(b) {
 b.innerRadius = r * .6;
 var i = d3.interpolate({innerRadius: 0}, b);
 return function(t) {
   return arc(i(t));
 };
}

//Second pie chart
var w2 = 400,
   h2 = 400,
   r2 = Math.min(w2, h2) / 2,
   data2 = d3.range(10).map(Math.random),
   color2 = d3.scale.category20(),
   arc2 = d3.svg.arc().outerRadius(r),
   donut2 = d3.layout.pie();

var pie2 = d3.select("body")
 .append("svg:svg")
   .data([data.sort(d3.descending)])
   .attr("width", w2)
   .attr("height", h2)

var arcs2 = pie2.selectAll("g.arc")
   .data(donut)
 .enter().append("svg:g")
   .attr("class", "arc")
   .attr("transform", "translate(" + r2 + "," + r2 + ")");

var paths2 = arcs2.append("svg:path")
   .attr("fill", function(d, i) { return color(i); });

paths2.transition()
   .ease("bounce")
   .duration(2000)
   .attrTween("d", tweenPie2);

paths2.transition()
   .ease("elastic")
   .delay(function(d, i) { return 2000 + i * 50; })
   .duration(750)
   .attrTween("d", tweenDonut2);

function tweenPie2(b) {
 b.innerRadius = 0;
 var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
 return function(t) {
   return arc2(i(t));
 };
}

function tweenDonut2(b) {
 b.innerRadius = r2 * .6;
 var i = d3.interpolate({innerRadius: 0}, b);
 return function(t) {
   return arc2(i(t));
 };
}

</script>
 </body>
</html>

Modified http://mbostock.github.com/d3/d3.js?2.3.0 to a secure url

Modified http://mbostock.github.com/d3/d3.layout.js?2.3.0 to a secure url

https://mbostock.github.com/d3/d3.js?2.3.0

https://mbostock.github.com/d3/d3.layout.js?2.3.0