D3.js Doughnut Chart

by Alex Azuero

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.js"></script>
<script src="https://dc-js.github.io/dc.js/js/dc.js"></script>
<link rel="stylesheet" href="https://dc-js.github.io/dc.js/css/dc.css">
<div id="pieChart"></div>

CSS

#pieChart svg { width: 500px; float: left}
.dc-legend {font-size: 18px;}
#pieChart path{
    stroke: white;
    stroke-width: 2;
}

JavaScript

var data = [{"grade": "Grade K", "count": 18}, 
            {"grade": "Grade 1", "count": 10}, 
            {"grade": "Grade 2", "count": 89}, 
            {"grade": "Grade 3", "count": 5}];

var pieChart = dc.pieChart("#pieChart");
    
var ndx = crossfilter(data),
        gradeDimension = ndx.dimension(function (d) {
            return d.grade;
		}),
        gradeCount = gradeDimension.group().reduceSum(function(d){
            return d.count;
        });

    pieChart.width(300)
        .height(300)
        .radius(150)
        .innerRadius(60)
        .dimension(gradeDimension)
        .group(gradeCount)
        .label(function(d) {
            return d.value;
        })
        .legend(
            dc.legend().x(350).y(100).itemHeight(24).gap(10)
        );
	pieChart.onClick = function() {};

    var colorScale = d3.scale.ordinal()
            .domain(["Grade K", "Grade 1", "Grade 2", "Grade 3"])
            .range(["#D82C8C", "#17A7CF", "#E58304", "#73C82E"]);

    pieChart.colors(colorScale);
    dc.renderAll();