Building a pie chart

A pie chart or a circle graph is a circular graph that contains 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 became 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.pie is designed for. In this recipe, we will see how a pie layout can be used to implement a fully functional pie chart.

Getting ready

Open your local...