Pie Multiples with Nesting

100%

Pie Multiples with Nesting

✓ Published0🌍 Public

Last edited Jan 18, 2017

Created on Jan 18, 2017

Multiple donut charts visualize flight counts by carrier for four U.S. airports, with each chart sized identically. The nested tabular data groups flights by origin airport, and each pie chart uses a donut layout with arcs encoding count magnitudes. The visualization is rendered as SVG using D3.v3 APIs: `d3.layout.pie` computes arc angles, `d3.svg.arc` draws the donut shapes, and `d3.nest` groups the CSV data. Color assignment uses `d3.scale.category20c()` on carrier names, with labels positioned at 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.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/1305337'>Pie Multiples with Nesting</a>

gpl-3.0 Licensed

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

95% match

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

93% 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

82% match

Loading thumbnail…

Donut-Pie Chart

This donut-pie chart visualizes hierarchical data from a CSV file, showing current statuses in the outer donut ring and prior statuses in the inner pie, with color coding for New, Open, Reopened, and Closed categories. Built with d3.v3, it uses `d3.layout.pie`, `d3.svg.arc`, and `d3.nest` to aggregate and structure the data, rendering as SVG. The outer arc and inner wedge paths are styled with distinct radii, and labels are positioned via arc centroids.

TThanaporn-sk

79% 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

77% 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…

Donut-Pie Chart

This donut-pie chart combines two D3 v3 pie layouts to show hierarchical proportions of issue statuses: the outer donut ring displays the current status totals, while the inner pie wedges break down each prior status within those totals. Both layers share an ordinal color scale mapping statuses—New, Open, Reopened, Closed—and use `d3.svg.arc` for rendering SVG paths. Data is loaded from a CSV file and processed with `d3.nest` and rollup to aggregate counts by current status before sorting.

SSpaceActuary

75% match

Loading thumbnail…

Sized Donut Multiples

Sized Donut Multiples uses d3.pie and d3.arc to render three donut charts, one per case in a CSV dataset, with each donut’s radius scaled by the square root of its total energy consumption via d3.scaleSqrt. The code uses d3-selection’s `.each()` to bind parent and child data, filtering and ordering arcs according to a predefined category list. Arcs are colored by category via a hardcoded palette, with labels showing the case name, total value, and unit. The SVG output is a technical demonstration, not recommended for comparing distributions across cases.

MMingboPeng

75% match