This tutorial is original from https://gist.github.com/mbostock/3887235, but I’ve add my own comment and some changes.

First have a look how the original author making pie chart in d3.js. And I’ll start to walk through the example and explain some of the usage of d3.js.

So first look at the raw data, it is a csv file:

age,population
<5,2704659
5-13,4499890
14-17,2159981
18-24,3853788
25-44,14106543
45-64,8819342
≥65,612463

Ok. So first step is to include d3.js in your html.

1<script src="http://d3js.org/d3.v3.min.js"></script>

First step is to set the width, height and radius of your chart.

1var width = 960,
2    height = 500,
3    // find the min of width and height and devided by 2
4    radius = Math.min(width, height) / 2;

Setting d3 scale. d3.scale.ordinal() constructs a new ordinal scale with an empty domain and an empty range. ordinal.domain([values]) is to set the domain of the scale. ordinal.range([values]) sets the output range of the ordinal scale to the specified array of values.

So we are going to set the colors for now, the first domain will set to color #98abc5, second #7b6888 … and so on.

see more in: https://github.com/mbostock/d3/wiki/Ordinal-Scales

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

Constructs a new arc generator. This will create the path of the pie chart of each piece. outerRadius is the outter radius of the pie chart. innerRadius is the inner radius. While you pass the data to arc(data) it will automatically generate the svg path.

see more in: https://github.com/mbostock/d3/wiki/SVG-Shapes#arc

1var arc = d3.svg.arc()
2    // the outer radius of the pie chart.
3    .outerRadius(radius - 10)
4    // the inner radius of the pie chart, set 0 for now
5    .innerRadius(0);

Constructs a new pie function, set sort function (here set to null),setting to null the order will be the data importing order.

1var pie = d3.layout.pie()
2    .sort(null)
3    .value(function(d) { return d.population; });

You can also set to ascending or descending pretty easy.

for ascending:

1var pie_asc = d3.layout.pie()
2    .sort(function(a, b) {
3        return d3.ascending(a.population, b.population);
4    })
5    // d is the data, so d.population is the population of the raw data.
6    .value(function(d) { return d.population; })

for descending:

1var pie_desc = d3.layout.pie()
2    .sort(function(a, b) {
3        return d3.descending(a.population, b.population);
4    })
5    // d is the data, so d.population is the population of the raw data.
6    .value(function(d) { return d.population; })

Ok, so now we are going to append a new svg in html

1var svg = d3.select("body").append("svg")
2    // setting width and height attribute
3    .attr("width", width)
4    .attr("height", height)
5  .append("g")
6    // transform's translate is to set the x, y of the position
7    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

after append the svg, we are going to load in the data.

 1d3.csv("data.csv", function(error, data) {
 2 
 3  // convert all population to integer
 4  data.forEach(function(d) {
 5    d.population = +d.population;
 6  });
 7 
 8  // append a group
 9  var g = svg.selectAll(".arc")
10      .data(pie(data))
11    .enter().append("g")
12      .attr("class", "arc");
13 
14  // append path, the pie for each age
15  g.append("path")
16      .attr("d", arc)
17      .style("fill", function(d) { return color(d.data.age); });
18 
19  // add text to pie chart
20  g.append("text")
21      .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
22      .attr("dy", ".35em")
23      .style("text-anchor", "middle")
24      .text(function(d) { return d.data.age; });
25 
26});

Code

All the code is avilable on gist


References