Pie Multiples with Nesting

100%

Pie Multiples with Nesting

✓ Published0🌍 Public

Last edited Sep 7, 2013

Created on Sep 7, 2013

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.

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.

http://stackoverflow.com/questions/18668271/apply-d3-nest-rollup-to-nested-pie-chart-to-vary-the-size-of-the-pies

Similar vizzes

Loading thumbnail…

Pie Multiples with Nesting

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.

Mmbostock

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

80% match

Loading thumbnail…

Interactive Pie Chart showing percentage of flights delayed w.r.t Departure for each origin airport

This interactive donut chart visualizes the percentage of flights delayed relative to departure for each origin airport, with color saturation indicating the proportion of total delays. Hovering over a slice reveals the exact percentage of delay attributed to that airport in a tooltip. Built with D3 v5, the visualization uses `d3.pie` and `d3.arc` to generate the donut slices and `scaleOrdinal` for color mapping. Data comes from a Flight Delay Analysis dataset, loaded via `d3.csv` and aggregated using `d3.nest`.

JJosvin John

76% match

Loading thumbnail…

Pie Chart

A donut chart displays six data points as animated arcs, with each segment labeled by its data ID. Built with D3 v4, the visualization uses the `d3.pie` layout, `d3.arc` geometry, and a `transition.attrTween` to smoothly interpolate between random values on each update. The SVG is rendered dynamically, with slices colored via `d3.scaleOrdinal` and labels positioned at arc centroids.

MMTClass

74% match

Loading thumbnail…

Making a Pie Chart

This example shows a donut chart of income sources—Sales, Dividends, and Interest—with labeled slices and a custom color scale. It loads data from a CSV file, converts the amounts to thousands, and renders the chart as SVG. The code uses D3 v5 APIs including `d3.pie`, `d3.arc`, `scaleOrdinal`, and `csv` to compute slice angles, generate paths, and position labels via arc centroids.

BbeauMarko

73% 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.

深深度碎片

73% match

Loading thumbnail…

Pie chart

The visualization displays two interactive pie charts comparing apple and orange counts across five regions, with a toggleable radio interface to switch datasets. Built with D3.js (v5.16.0), it renders an animated SVG donut chart using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` color scales. Legends appear as colored dots and labels beside the chart. On dataset change, arcs transition smoothly via `transition.attrTween` with interpolation, and a delayed auto-animation replays the arc tweens every two seconds. Data is loaded asynchronously from `data.json` via `d3.json`.

KKrister

72% match

Loading thumbnail…

Pie charts labels

This variation of a donut chart demonstrates how to label each slice with text and leader lines that extend outward. A button click triggers a transition to new random data, with all elements—arcs, labels, and polylines—smoothly animating to their new positions. The visualization uses D3.js v3, employing `d3.layout.pie` for the pie layout, `d3.svg.arc` for the donut and outer arcs, and `transition.attrTween` with `d3.interpolate` to morph values. Text labels are positioned via `outerArc.centroid` and aligned left or right based on the slice’s mid-angle.

FFrissAnalytics

72% match