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.
