Building a pie chart

A pie chart or a circle graph is a circular graph containing multiple sectors used to illustrate numerical proportion. We will explore techniques, involving D3 pie layout, to build a fully functional pie chart in this recipe. In Chapter 7, Getting into Shape, it becomes clear that using the D3 arc generator directly is a very tedious job. Each arc generator expects the following data format:

var data = [
  {startAngle: 0, endAngle: 0.6283185307179586}, 
  {startAngle: 0.6283185307179586, endAngle: 1.2566370614359172},
  ...
  {startAngle: 5.654866776461628, endAngle: 6.283185307179586}
];

This essentially requires the calculation of the angle partition for each slice out of an entire circle of 2 * Math.PI. Obviously this process can be automated by an algorithm which is exactly what d3.layout.pie is designed for. In this recipe, we will see how pie layout can be used to implement a fully functional pie chart.

Getting ready

Open your local copy of the following file in your...