D3 Donut chart with JSON data

D3 Donut chart with JSON data

by Khadeer Mohammed

CSS

.arc text {
  font: 10px sans-serif;
  text-anchor: middle;
}

.arc path {
  stroke: #fff;
}

JavaScript

/// d3 actionsssss		
var data=[{"crimeType":"mip","totalCrimes":60},{"crimeType":"theft","totalCrimes":400},{"crimeType":"drugs","totalCrimes":81},{"crimeType":"arson","totalCrimes":50},{"crimeType":"assault","totalCrimes":80},{"crimeType":"burglary","totalCrimes":49},{"crimeType":"disorderlyConduct","totalCrimes":63},{"crimeType":"mischief","totalCrimes":150},{"crimeType":"dui","totalCrimes":107},{"crimeType":"other","totalCrimes":58}];

var width = 500,
    height = 250,
    radius = Math.min(width, height) / 2;

/*var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);*/
var color = d3.scale.category20c();

var arc = d3.svg.arc()
    .outerRadius(radius - 10)
    .innerRadius(radius - 70);
    
var labelArc = d3.svg.arc()
      .outerRadius(radius - 40)
      .innerRadius(radius - 40);

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

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

    var g = svg.selectAll(".arc")
        .data(pie(data))
        .enter().append("g")
        .attr("class", "arc");

    g.append("path")
        .attr("d", arc)
        .style("fill", function (d) {
        return color(d.data.crimeType);
    });

    g.append("text")
        .attr("transform", function (d) {
        return "translate(" + labelArc.centroid(d) + ")";
    })
        .attr("dy", ".35em")
        .style("text-anchor", "middle")
        .text(function (d) {
        	return d.data.totalCrimes;
    		});