nanu146/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js" charset="utf-8"></script>
<script>
var data = [ {name: "one", value: 10375},
            {name: "two", value:  7615},
            {name: "three", value:  832},
            {name: "four", value:  516},
            {name: "five", value:  491} ];

var margin = {top: 20, right: 20, bottom: 20, left: 20};
    width = 400 - margin.left - margin.right;
    height = width - margin.top - margin.bottom;

var chart = d3.select("body")
                .append('svg')
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
               .append("g")
                .attr("transform", "translate(" + ((width/2)+margin.left) + "," + ((height/2)+margin.top) + ")");


var radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()
    .range(["#3399FF", "#5DAEF8", "#86C3FA", "#ADD6FB", "#D6EBFD"]);

var arcafter = d3.svg.arc()
    .outerRadius(radius)
    .innerRadius(radius - 100);

var arc = d3.svg.arc()
    .outerRadius(radius-80)
    .innerRadius(radius -100);

var pie = d3.layout.pie()
    .sort(null)
    .startAngle(1.1*Math.PI)
    .endAngle(3.1*Math.PI)
    .value(function(d) { return d.value; });


var g = chart.selectAll(".arc")
  .data(pie(data))
.enter().append("g")
  .attr("class", "arc");

g.append("path")
  .style("fill", function(d) { return color(d.data.name); })
  .attr("d",function(d){return arc(d)});

g.append("path")
  .style("fill", function(d) { return color(d.data.name); })
  .transition().delay(function(d, i) { return (i+1.31)/data.length * 500; }).duration(function(d, i) { return (i+1.31)/data.length * 500; })
  .attrTween('d', function(d) {
       var i = d3.interpolate(d.startAngle+0.1, d.endAngle);

       return function(t) {
           d.endAngle = i(t);
         return arcafter(d);
       }
  });
</script></body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	</style>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js" charset="utf-8"></script>
	<script>
	var data = [ {name: "one", value: 10375},
	{name: "two", value: 7615},
	{name: "three", value: 832},
	{name: "four", value: 516},
	{name: "five", value: 491} ];

	var margin = {top: 20, right: 20, bottom: 20, left: 20};
	width = 400 - margin.left - margin.right;
	height = width - margin.top - margin.bottom;

	var chart = d3.select("body")
	.append('svg')
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + ((width/2)+margin.left) + "," + ((height/2)+margin.top) + ")");


	var radius = Math.min(width, height) / 2;

	var color = d3.scale.ordinal()
	.range(["#3399FF", "#5DAEF8", "#86C3FA", "#ADD6FB", "#D6EBFD"]);

	var arcafter = d3.svg.arc()
	.outerRadius(radius)
	.innerRadius(radius - 100);

	var arc = d3.svg.arc()
	.outerRadius(radius-80)
	.innerRadius(radius -100);

	var pie = d3.layout.pie()
	.sort(null)
	.startAngle(1.1*Math.PI)
	.endAngle(3.1*Math.PI)
	.value(function(d) { return d.value; });


	var g = chart.selectAll(".arc")
	.data(pie(data))
	.enter().append("g")
	.attr("class", "arc");

	g.append("path")
	.style("fill", function(d) { return color(d.data.name); })
	.attr("d",function(d){return arc(d)});

	g.append("path")
	.style("fill", function(d) { return color(d.data.name); })
	.transition().delay(function(d, i) { return (i+1.31)/data.length * 500; }).duration(function(d, i) { return (i+1.31)/data.length * 500; })
	.attrTween('d', function(d) {
	var i = d3.interpolate(d.startAngle+0.1, d.endAngle);

	return function(t) {
	d.endAngle = i(t);
	return arcafter(d);
	}
	});
	</script></body>