Untitled

100%

✓ Published0🌍 Public

Last edited Feb 13, 2020

Created on Feb 13, 2020

Forked from 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.

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.

MIT Licensed

Similar vizzes

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

94% match

Loading thumbnail…

Sized Donut Multiples

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

KKuerzibe

87% match

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

83% match

Loading thumbnail…

Untitled

This example shows a donut-style pie chart of population by age groups, with colored arcs labeled directly on the chart and a legend listing each age range alongside its population count. The chart uses d3.csv to load age-pop.csv from a remote URL, d3.layout.pie to compute arc angles from the population field, and d3.svg.arc to render the segments. Colors come from d3.scale.category20(), while the legend and arc labels are added as SVG text and rect elements appended to the same svg container.

MManoj Kolluri

82% match

Loading thumbnail…

Untitled

This example shows a donut chart that visualizes a small dataset of five categorical values, with each slice colored distinctly and separated by black strokes. The chart uses D3.js version 6, where `d3.pie()` computes the arc angles from the data and `d3.arc()` generates the SVG path geometries with an inner radius creating the donut hole. A color scale via `d3.scaleOrdinal()` maps each category to a unique color, while the SVG rendering is sized and centered within a fixed 450×450 viewport. The slices are semi-transparent and rendered as SVG path elements appended to a grouped container.

Nnicolekevans

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

82% match

Loading thumbnail…

Untitled

This example shows a donut chart of population data by age group, with a legend positioned to the right of the chart. The visualization uses D3 v3’s `d3.svg.arc` and `d3.layout.pie` to compute the arc paths, while a custom `d3.legend` function (defined in `d3.legend.js`) generates the legend from `data-legend` attributes attached to each arc path. Each slice is filled with a categorical color from an ordinal scale (`d3.scale.ordinal`), and the legend displays matching colors and age labels. Data is loaded from a CSV file.

TTharun2022

81% match

Loading thumbnail…

Untitled

This example shows a donut chart with labels connected by polylines, using dummy data with eight categories where three have value one and five have value nine. The chart uses d3.pie and d3.arc to generate slices with a donut hole, while d3.scaleOrdinal and d3.schemeDark2 assign colors. Labels are positioned outside the chart using outerArc centroids, with text-anchor adjusted based on the slice angle for left or right alignment. The SVG rendering includes semi-transparent fills and white stroke separations.

SSampras Dsouza

80% match