#### D3 - Pie Charts

Statistics Invoices Schedule

##### 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.

Apples Oranges

###### 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.

Lemons Melons

###### 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

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.