Pie chart

This is the pie chart section of the gallery. The pie chart is highly criticized in dataviz for meaningful reasons. You should read more about that before making one.If you're sure about what you're doing, learn how to build one with d3.js using the examples below.

Note

It is of interest to note that pie chart and donut chart are built using exactly the same process in d3.js. Thus, you probably want to visit the donut section for more examples

Donut chart section

Step by step

Building a pie chart in d3.js always start by using the d3.pie() function. This function transform the value of each group to a radius that will be displayed on the chart. This radius is then provided to the d3.arc() function that draws on arc per group.

Most basic

The most basic pie chart you can do in d3.js. Keeping only the core code.

Add annotation

How to use the centroid() function to add labels at the right position of each slice.

Data input selection

Have a smooth transition between 2 datasets. Note that the number of group can even be different from one dataset to the other.

a pie chart with input data selector

Selection of blocks

A selection of examples showing the application of the basic concept to real life dataset.

Pie chart with annotation

A pie chart by Mike Bostock with fancy annotation for each group.

network graph les miserables

Clean layout

Clean labeling of groups. Use d3 v3 though.

network graph les miserables

Pie chart with animation

Good illustration on how to animate transition between 2 input data.

network graph les miserables

Related chart types

Treemap

Doughnut

Pie chart

Dendrogram

Circular packing

Sunburst