D3.js donut chart

by Rich Costello

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

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: [13245, 3479, 19697, 24037, 14024],
};

    width = 460,
    height = 300,
    radius = Math.min(width, height) / 2;
		c = Math.min(width, height) / 2,
    ro = Math.min(width, height) / 2 - (c * .20),
    ri = Math.min(width, height) / 2 - (c * .5),
    a = (Math.PI * -2) / dataset.length,
    color = d3.scale.category10();

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

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

var svg = d3.select("body")
		.append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var path = svg.selectAll("path")
    .data(pie(dataset.apples))
  .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc);