Donut

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-color.v1.min.js"></script>
	<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
	<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <div id="chart"></div>
  <script>
    var dataset = [
    {
      cat: 'Exceptions',
      value: 20
    },
    {
      cat: 'Manual WorkItem',
      value: 30
    },
    {
      cat: 'Notifiers',
      value: 10
    }
  ];

var width = 960;
        var height = 500;
        var radius = Math.min(width, height) / 2;
        var donutWidth = 75;                            // NEW

var color = d3.scaleOrdinal(d3.schemeBlues[dataset.length]);

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.arc()
          .innerRadius(radius - donutWidth)             // UPDATED
          .outerRadius(radius);

var pie = d3.pie()
          .value(function(d) { return d.value; })
          .sort(null);

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

</script>
</body>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-color.v1.min.js

https://d3js.org/d3-interpolate.v1.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js