D3 donut chart

from tutorial http://zeroviscosity.com/category/d3-js-step-by-step

by Rich Costello

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
<script src="https://fonts.googleapis.com/css?family=Roboto:400,700"></script>
<body>
    
    <div id="chart"></div>
</body>

CSS

#chart {
     height: 360px;
     margin: 0 auto;
     /* NEW */
     position: relative;
     width: 360px;
 }
 

 /*.tooltip {
     background: #eee;
     box-shadow: 0 0 5px #999999;
     color: #333;
     display: none;
     font-size: 12px;
     left: 130px;
     padding: 10px;
     position: absolute;
     text-align: center;
     top: 95px;
     width: 80px;
     z-index: 10;
 }*/
 .legend {
     font-family: 'Roboto', sans-serif;
     font-size: 16px;
     font-weight: 300;
 }
 rect {
     cursor: pointer;
     /* NEW */
     stroke-width: 2;
 }
 rect.disabled {
     /* NEW */
     fill: transparent !important;
     /* NEW */
 }
 /* NEW */
 h1 {
     /* NEW */
     font-size: 14px;
     /* NEW */
     text-align: center;
     /* NEW */
 }

JavaScript

var dataset = [
    {label:'Issued & Reserved',count:179130},
    {label:'Remaining',count:424923}
];

var width = 310;
        var height = 460;
        var radius = Math.min(width, height) / 2;
        var donutWidth = 55;
        var legendRectSize = 18;
        var legendSpacing = 4;

        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(radius - donutWidth)
            .outerRadius(radius);
            
   

        var pie = d3.layout.pie()
            .value(function (d) {
            return d.count;
        })
            .sort(null);
            
            dataset.forEach(function (d) {
                d.count = +d.count;
                d.enabled = true; // NEW
            });

            var path = svg.selectAll('path')
                .data(pie(dataset))
                .enter()
                .append('path')
                .attr('d', arc)
                .attr('fill', function (d, i) {
                return color(d.data.label);
            }) // UPDATED (removed semicolon)
            .each(function (d) {
                this._current = d;
            }); // NEW

            var legend = svg.selectAll('.legend')
                .data(color.domain())
                .enter()
                .append('g')
                .attr('class', 'legend')
                .attr('transform', function (d, i) {
                var height = legendRectSize + legendSpacing;
                var offset = height * color.domain().length / 2;
                var horz = -2 * legendRectSize;
                var vert = i * height - offset;
                return 'translate(' + horz + ',' + vert + ')';
            });

            legend.append('rect')
               ...