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.
