D3.js donut chart

by HugeHugh

HTML

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

JavaScript

var radius = {
	outer: 100,
  middle: 65,
  inner: 42,  
};

var dataset={
ages: [13,24,50,30],
};

var color = {
	outer: d3.scale.category20(),
  inner: d3.scale.category20(),	// todo: darken
};

var arc = d3.svg.arc()
.outerRadius(radius.outer)
.innerRadius(radius.middle-1);

var arc2 = d3.svg.arc()
.outerRadius(radius.middle)
.innerRadius(radius.inner);

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

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

var svg = d3.select("#double-donut-chart").append("svg")
    .attr("width", radius.outer * 2)
  	.attr("height", radius.outer * 2)
    .attr("class","outerPie")
    .append("g")
    .attr("transform", "translate(" + radius.outer + "," + radius.outer + ")");
    
var svg2 = d3.select(".outerPie").append("svg")
    .attr("width", radius.outer * 2)
  	.attr("height", radius.outer * 2)
    .attr("class","innerPie")
    .append("g")
    .attr("transform", "translate(" + radius.outer + "," + radius.outer + ")");

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

var path2 = svg2.selectAll("path")
    .data(pie2(dataset.ages))
  	.enter().append("path")
    .attr("fill", function(d, i) { return d3.hsl(color.inner(i)).darker(0.5); })
    .attr("d", arc2);