Simple D3 Pie Chart

aAn example of a simple pie chart drawn with D3.js

by karthick6891

HTML

<div id="chart"></div>

JavaScript

var w = 400;
var h = 400;
var r = h/2;
var color = d3.scale.category20c();

var data = [{"label":"Category A", "value":20}, 
		          {"label":"Category B", "value":50}, 
		          {"label":"Category C", "value":30}];


var vis = d3.select('#chart')
.append("svg:svg")
.data([data])
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(" + r + "," + r + ")");

var arc = d3.svg.arc().outerRadius(r)
.startAngle(function(d) { return d.startAngle + Math.PI/2; })
.endAngle(function(d) { return d.endAngle + Math.PI/2; });

var pie = d3.layout.pie().value(function(d){return d.value;
                                           });
var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice");
arcs.append("svg:path").attr("fill", function(d, i){
    return color(i);}).attr("d", arc);
arcs.append("svg:text").attr("transform", function(d){
			d.innerRadius = 0;
			d.outerRadius = r;
    return "translate(" + arc.centroid(d) + ")";}).attr("text-anchor", "middle").text( function(d, i) {
    return data[i].label;}
		);