Pie charts
Basic pie chart
Example of a simple pie chartconstructed 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 chartdemonstrates how to update values with an animated transition. Clicking on the radio buttons changes the displayed metric.
Pie arc tween
An example of pie charttweening arcs, attrTweentransitions the value of the attribute with the specified name according to the specified tweenfunction. The starting and ending value of the transition are determined by tween.
Donut charts
Basic donut chart
Example of a simple donut chartconstructed 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 chartdemonstrates how to update values with an animated transition. Clicking on the radio buttons changes the displayed metric.
Donut arc tween
An example of donut charttweening arcs, attrTweentransitions the value of the attribute with the specified name according to the specified tweenfunction. The starting and ending value of the transition are determined by tween.
Pie multiples
Pie multiples
An example of multiple pie chartscreated 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 chartscreated 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 chartswith 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 chartswith 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.