Sized Donut Multiples

100%

Sized Donut Multiples

✓ Published0🌍 Public

Last edited Mar 15, 2019

Created on Mar 15, 2019

This example uses a matrix of donut charts to show the population distribution across age groups for each US state. Each donut’s area is proportional to the state’s total population, using `d3.scaleSqrt` for scaling. The code uses `d3.csv` to load the data, `d3.pie` and `d3.arc` to compute and render the arcs, and `d3.selectAll` with `selection.each` to access both the state-level and age-group-level data simultaneously within the SVG. The legend maps age categories to colors via `d3.scaleOrdinal`.

AI-generated description

This example demonstrates how to use selection.each to create a context to access parent and child data simultaneously. The donut multiples are sized such that the area of each donut is proportionate to the total population, such that the area of the arcs is comparable across states.

This is a technical demonstration rather than a design recommendation; you probably don’t want to use this visual form. A normalized stacked bar chart is better at comparing the age distribution across states, and a stacked or grouped bar chart is better at comparing absolute values.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4c5fad723c87d2fd8273'>Sized Donut Multiples</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Sized Donut Multiples

A grid of donut charts shows the age distribution of each US state, with chart area scaled proportionally to total state population via `d3.scaleSqrt` and arcs sized by age cohort. The visualization uses `d3.pie` and `d3.arc` to generate SVG paths, while `selection.each` in a `multiple` function accesses both parent (state) and child (age) data simultaneously. Color encodes age categories through `d3.scaleOrdinal`, and a separate SVG legend lists the age bands. Data comes from `data.csv`, loaded with `d3.csv`.

Mmbostock

94% match

Loading thumbnail…

Untitled

A matrix of donut charts displays the population distribution across age groups for each U.S. state, with each donut's area scaled proportionally to the state's total population. The visualization uses a `d3.scaleSqrt` for radius and `d3.pie` with `padAngle` to generate the arcs. The code leverages `selection.each` to create a context where parent and child data—state totals and individual age-group values—are accessible simultaneously within each SVG rendering. Data is loaded via `d3.csv` from a local CSV file, and `d3.arc` handles the arc paths.

Ssowbalas

90% match

Loading thumbnail…

Donut Multiples

Donut multiples display age-group population proportions for each U.S. state as small pie charts, with a legend mapping seven age brackets to distinct colors. The charts are generated from a CSV file parsed via d3.csv, with d3.scale.ordinal assigning colors, d3.layout.pie computing arc angles, and d3.svg.arc rendering the donut segments as SVG paths. Each state’s label appears centered within its donut, highlighting proportional differences across regions.

Mmbostock

90% match

Loading thumbnail…

Untitled

This example uses d3.pie and d3.arc to render a matrix of donut charts, one per U.S. state, with each donut’s area scaled via d3.scaleSqrt to reflect the state’s total population. The arcs within each donut represent age brackets, colored using d3.scaleOrdinal. Data is loaded from a CSV with d3.csv, and the `selection.each` method provides simultaneous access to parent state data and child age data. The SVG charts are sized dynamically based on each state’s population sum.

VVito

87% match

Loading thumbnail…

Donut Chart

This donut chart displays the population distribution across seven age groups, from under 5 to 65 and older, using a ring of color-coded arcs. The chart is built with D3 v3, loading data from a CSV file via `d3.csv` and rendering SVG paths. It uses `d3.scale.ordinal` for color encoding, `d3.layout.pie` to compute arc angles from the population values, and `d3.svg.arc` to define the ring geometry with an inner and outer radius. Each segment includes a label positioned at the arc’s centroid.

Mmbostock

83% match

Loading thumbnail…

Canvas Donut

A donut chart displays the population distribution across seven age groups, with each segment labeled by its age range. The visualization renders to a Canvas element using d3-shape’s `d3.arc` for the donut and label arcs, and `d3.pie` to compute the angles from tab-separated data loaded via `d3.requestTsv`. Each slice is filled with a distinct color, separated by white strokes, and age labels are positioned using `labelArc.centroid`. Data comes from the included `data.tsv` file.

Mmbostock

80% match

Loading thumbnail…

Donut Chart 3 layers w. filters

This three-layer donut chart displays population data across 28 age groups, with each layer representing a progressively larger subset of the data. The chart uses D3 v3’s `d3.layout.pie` to compute arc angles, `d3.svg.arc` to define concentric ring geometries, and `d3.scale.ordinal` for color encoding. Instead of standard fills, each segment contains a circularly clipped placeholder kitten image, alternating between a grayscale filter and a custom “Gothamish” color matrix filter. Data is loaded from CSV via `d3.csv`.

PPatrick Wojda

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

80% match