enjalot/index.html

## index.html
<!DOCTYPE html>
<html>
 <head>
   <title>Pie Chart</title>
   <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.3.0"></script>
   <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.3.0"></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>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Pie Chart</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.3.0"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.3.0"></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>