D3.js Step by Step: Step 2 - Variable Radius Donut Chart

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>D3.js Step by Step: Step 2 - Variable Radius 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 dataset = [
          { count: 10, size: 45 }, 
          { count: 20, size: 55 },
          { count: 30, size: 65 },
          { count: 40, size: 75 }
        ];

        var width = 360;
        var height = 360;
        var donutWidth = 75;
        var innerRadius = (Math.min(width, height) / 2) - donutWidth;

        var color = d3.scale.category20b();

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

        var arc = d3.svg.arc()
          .innerRadius(innerRadius)
          .outerRadius(function (d) { 
            return innerRadius + d.data.size; 
          });
          
        var pie = d3.layout.pie()
          .value(function(d) { return d.count; })
          .sort(null);

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

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

</html>

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