<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
text{
  font-family:sans-serif;
}
var width = 500,
    height = 500,
    radius = Math.min(width, height) / 2;

var arc = d3.svg.arc()
    .outerRadius(radius - 100)
    .innerRadius(0);

var labelArc = d3.svg.arc()
    .outerRadius( 220)
    .innerRadius( 0);

var color = d3.scale.ordinal()
    .range(["#ff3300","#ff9933", "#ffcc00","#ff8800", "#99ff33", "#009900"]);


var data = [
  {name:"Category 1",value:300+Math.random()*300},
  {name:"Category 2",value:300+Math.random()*300},
  {name:"Category 3",value:300+Math.random()*300},
  {name:"Category 4",value:300+Math.random()*300},
  {name:"Category 5",value:300+Math.random()*300},
  {name:"Category 6",value:300+Math.random()*300}
];

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

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.value); });

var total = d3.sum(data, function(d) { 
            return d.value; 
        });

g.append("text")
      .attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
      .attr("dy", ".35em")
      .attr("fill", "#ffffff")
      .text(function(d) { return Math.round(100*d.data.value/total)+"%"; });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.