Pie Multiples with Nesting

100%

Pie Multiples with Nesting

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Oct 22, 2011

Four small donut charts display the distribution of airline carriers at four US airports. Each chart represents a single airport, with arcs sized by passenger count and colored by carrier. The visualization loads CSV data from `flights.csv` and groups entries by airport using `d3.nest`. The `d3.layout.pie` computes arc angles, while `d3.svg.arc` generates the SVG paths, with a rotated label added for larger segments.

AI-generated description

An example of multiple pie (donut) charts created with D3. 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.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Pie Multiples with Nesting

This example uses nested pie charts to compare flight volumes by origin airport and carrier, with each donut representing one airport and its arcs sized by the proportion of total flights for that origin. The data comes from a CSV file mapping origins, carriers, and flight counts. The code employs D3's `d3.nest` to group rows by origin, `d3.layout.pie` for angle encoding, and `d3.svg.arc` with dynamic inner and outer radii scaled by the airport’s total flights. Color is assigned via `d3.scale.category20c`, and labels rotate to follow arc centroids.

11wheel

91% match

Loading thumbnail…

Pie Multiples

Four small donut charts display proportional breakdowns for each row of a two-dimensional numeric array. D3 v3’s `d3.layout.pie` computes arc angles, while `d3.svg.arc` renders the path shapes. Each chart uses an inner and outer radius, with colors assigned by index from `d3.scale.category20c()`. The SVG elements are generated per row, and the totals for each row differ.

Mmbostock

84% match

Loading thumbnail…

D3: Pie layout

This example shows a donut chart built with D3.js, displaying six numeric values as colored arc segments arranged around a central hole. Each segment is labeled with its corresponding value, positioned at the centroid of the arc. The visualization uses the `d3.pie()` layout to compute the angles and `d3.arc()` to generate the SVG path shapes, with an ordinal color scale (`d3.scaleOrdinal` and `d3.schemeCategory10`) assigning colors. Data is hardcoded as an array, and all rendering is done via SVG elements in d3.v4.

深深度碎片

74% match

Loading thumbnail…

Pie Chart Update, III

A pie chart with a donut layout transitions between two datasets, apples and oranges, loaded from a TSV file. The view shows the same arcs morphing between different values, with missing entries treated as zero to maintain object constancy. Two radio buttons switch the active dataset, triggering a 750-millisecond arc tween using D3’s `transition.attrTween` and `d3.interpolate`, which updates the stored angles in `_current`. The chart uses D3 v3’s `d3.layout.pie`, `d3.svg.arc`, and SVG `path` elements, with a timed automatic switch to oranges after two seconds.

Mmbostock

74% match

Loading thumbnail…

Arc Corners IV

A donut chart presents eight sequential values from a hardcoded Fibonacci-like array as colored wedges with rounded outer corners. The d3.svg.arc generator applies a cornerRadius of 20 pixels, while d3.layout.pie sets a padAngle to separate slices. Rendered as SVG paths in a centered group, each wedge uses a category10 color scale. The visualization highlights how rounded corners and padding soften the classic pie chart aesthetic, using D3 v3’s layout and shape APIs.

Mmbostock

74% match

Loading thumbnail…

Pie Chart

A donut chart displays the ten most common cocktail ingredients from a Hotaling & Co. dataset, ranked by frequency of use across recipes. The React app loads CSV data via `d3.csv`, aggregates counts with `d3.nest()`, and sorts results in descending order before slicing to the top ten. D3’s `pie()` generator computes arc angles, while the `arc()` generator renders SVG paths with an inner radius for the donut effect. Hovering reveals ingredient names and counts through native SVG `<title>` tooltips.

JJacklyn Turner

73% match

Loading thumbnail…

Pie Charts

This example demonstrates a pie chart and donut chart visualizing fruit quantities from a CSV dataset. Two animated SVG charts display proportional slices with labels, using a blue color scale to differentiate each fruit type. The visualization is built with D3 v4, utilizing `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the charts, while `transition.attrTween` animates the slices expanding from zero on load.

Jjenniferslagt

73% match

Loading thumbnail…

Pie Chart Update, II

Clicking the radio buttons in this donut chart switches the displayed metric between apple and orange counts from the `data.tsv` file. The chart uses a `d3.layout.pie` and `d3.svg.arc` to create the donut shape, with paths initially drawn and stored. On selection, the pie’s value function changes, and `transition().attrTween("d", arcTween)` animates the arcs over 750 milliseconds by interpolating between the stored and new angles.

Mmbostock

73% match