We can draw a pie chart by using svg to render arcs.
The conversion of data to appropriate arc sizes is handled by d3's pie layout.
var dataset = [ 5, 10, 20, 20, 6, 25 ]; var w = 500; var h = 500; var svg = d3.select("#draw_here") .append("svg") .attr("width", w) .attr("height", h); var outerRadius = w / 2; var innerRadius = w / 4; var arc = d3.svg.arc() .innerRadius(innerRadius) .outerRadius(outerRadius); var pie = d3.layout.pie(); var color = d3.scale.category10(); var arcs = svg.selectAll("g.arc") .data(pie(dataset)) .enter() .append("g") .attr("class", "arc") .attr("transform", "translate("+ outerRadius + ", " + outerRadius +")"); arcs.append("path") .attr("fill", function(d, i) { return color(i) }) .attr("d", arc); arcs.append("text") .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) .attr("text-anchor", "middle") .text(function(d) { return d.value; });