D3.js Step by Step: Step 2 - A Nested Donut Chart

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>D3.js Step by Step: Step 2 - A Nested Donut Chart</title>
  <link data-require="normalize@*" data-semver="3.0.1" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" />
</head>

<body>
  <div id="chart"></div>
  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js" data-semver="3.4.6" data-require="d3@*"></script>
  <script>
      (function(d3) {
        'use strict';

        var dataset1 = [
          { count: 10 }, 
          { count: 20 },
          { count: 30 },
          { count: 40 }
        ];
        
        var dataset2 = [
          { count: 5 }, 
          { count: 15 }, 
          { count: 25 },
          { count: 35 },
          { count: 45 }
        ];

        var width = 400;
        var height = 400;
        var donutWidth = 75;
        var radius1 = Math.min(width, height) / 2;
        var radius2 = radius1 - donutWidth;
        
        var color1 = d3.scale.category20();
        var color2 = d3.scale.category20c();

        var svg = d3.select('#chart')
          .append('svg')
          .attr('width', width)
          .attr('height', height);
        var svg1 = svg.append('g')
          .attr('transform', 'translate(' + (width / 2) + 
            ',' + (height / 2) + ')');
        var svg2 = svg.append('g')
          .attr('transform', 'translate(' + (width / 2) + 
            ',' + (height / 2) + ')');

        var arc1 = d3.svg.arc()
          .innerRadius(radius1 - donutWidth)  
          .outerRadius(radius1);
        var arc2 = d3.svg.arc()
          .innerRadius(radius2 - donutWidth)  
          .outerRadius(radius2);
          
        var pie = d3.layout.pie()
          .value(function(d) { return d.count; })
          .sort(null);

        var path1 = svg1.selectAll('path')
          .data(pie(dataset1))
          .enter()
          .append('path')
          .attr('d', arc1)
          .attr('fill', function(d, i) { 
            return color1(i);
          });
        var path2 = svg2.selectAll('path')
          .data(pie(dataset2))
          .enter()
          .append('path')
          .attr('d', arc2)
          .attr('fill', function(d, i) { 
            return color2(i);
          });

      })(window.d3);
    </script>
</body>

</html>

Learn more at: http://zeroviscosity.com/category/d3-js-step-by-step