Pie charts
Basic pie chart
Example of a simple pie chart constructed from a CSV file. The chart employs a number of D3 features: d3.csv - load and parse data; d3.scale.ordinal - color encoding; d3.svg.arc - display arcs; d3.layout.pie - compute arc angles from data.
Pie entry transition
Example of simple entry transition of a pie chart. A transition is a special type of selection where the operators apply smoothly over time rather than instantaneously. You derive a transition from a selection using the transition operator.
Pie chart update
This variation of a pie chart demonstrates how to update values with an animated transition. Clicking on the radio buttons changes the displayed metric.
Pie arc tween
An example of pie chart tweening arcs, attrTween transitions the value of the attribute with the specified name according to the specified tween function. The starting and ending value of the transition are determined by tween.
Donut charts
Basic donut chart
Example of a simple donut chart constructed from a CSV file. The chart employs a number of D3 features: d3.csv - load and parse data; d3.scale.ordinal - color encoding; d3.svg.arc - display arcs; d3.layout.pie - compute arc angles from data.
Donut entry transition
Example of simple entry transition of a donut chart. A transition is a special type of selection where the operators apply smoothly over time rather than instantaneously. You derive a transition from a selection using the transition operator.
Donut chart update
This variation of a donut chart demonstrates how to update values with an animated transition. Clicking on the radio buttons changes the displayed metric.
Donut arc tween
An example of donut chart tweening arcs, attrTween transitions the value of the attribute with the specified name according to the specified tween function. The starting and ending value of the transition are determined by tween.
Pie multiples
Pie multiples
An example of multiple pie charts created with D3.js. The data is represented as a two-dimensional array of numbers; each row in the array is mapped to a pie chart. Thus, each pie represents the relative value of a number (such as 1,013) within its rows. Note that in this dataset, the totals for each row are not equal.
Donut multiples
An example of multiple donut charts created with D3.js. The data is represented as a two-dimensional array of numbers; each row in the array is mapped to a pie chart. Thus, each pie represents the relative value of a number (such as 1,013) within its rows. Note that in this dataset, the totals for each row are not equal.
Nesting pie charts
Pie multiples with nesting
An example of multiple pie charts with nesting. The data is represented as a tabular array of objects; each row in the table is mapped to an arc, and rows are grouped into pie charts using d3.nest. Nesting allows elements in an array to be grouped into a hierarchical tree structure; think of it like the GROUP BY operator in SQL, except you can have multiple levels of grouping, and the resulting output is a tree rather than a flat table.
Donut multiples with nesting
An example of multiple donut charts with nesting. The data is represented as a tabular array of objects; each row in the table is mapped to an arc, and rows are grouped into pie charts using d3.nest. Nesting allows elements in an array to be grouped into a hierarchical tree structure; think of it like the GROUP BY operator in SQL, except you can have multiple levels of grouping, and the resulting output is a tree rather than a flat table.