D3.js donut chart

by Cyril Cherian

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="pie-chart"></div>

CSS

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}

text {
  font: 10px sans-serif;
}

form {
  position: absolute;
  right: 10px;
  top: 10px;
}

JavaScript

var dataset = {
  apples: [53245, 28479, 19697, 24037, 40245],
};

var width,
    height = 384,
    radius,
    color = d3.scale.category20(),
    svg = d3.select('#pie-chart')
            .append('svg')
            .attr('width', '100%');

width = d3.select('#pie-chart').node().offsetWidth;


var g = svg.attr('height', height)
        .append('g')
        .attr('transform', 'translate(' + width/2 +  ',' + height/2 +')');
        
radius = Math.min(width, height) / 2;

var pie = d3.layout.pie()
    .sort(null);

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


var path = g.selectAll("path")
    .data(pie(dataset.apples))
    .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .transition()
    .duration(function(d, i) {
      return i * 800;
    })
		.attrTween('d', function(d) {
   var i = d3.interpolate(d.startAngle+0.1, d.endAngle);
   return function(t) {
       d.endAngle = i(t);
     return arc(d);
   }
});