Skip to main content
SimilarExport ZIP
100%

Donut Chart

✓ Published0🌍 Public
Mmbostock
Last edited Oct 8, 2018
Created on Oct 14, 2012

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.

AI-generated description

This donut chart is constructed from a CSV file storing the populations of various age groups. The chart employs a number of D3 features:

gpl-3.0 Licensed

Similar vizzes

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
89% 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
86% match
Loading thumbnail…

Pie Chart

This pie chart displays the population distribution across seven age groups, from under five to 65 and over, with each slice labeled and colored distinctly. The visualization is built using D3 v4, leveraging d3-dsv to parse the CSV data, d3-scale for the ordinal color encoding, and d3-shape’s `d3.pie` and `d3.arc` to compute and render the arcs as SVG paths. Labels are positioned using the arc centroid method.

Mmbostock
85% 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
84% 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
84% 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
83% match
Loading thumbnail…

fresh block

This example presents a donut chart displaying the age distribution of a population, with each slice colored and labeled by age group. The chart is created using D3 v4, employing the `d3.pie` function to compute arc segments and the `d3.arc` API for rendering both the chart's path and label positioning. Data is loaded from a CSV file with columns for age and population, and the ordinal color scale assigns distinct colors to each category. The visualization renders as an SVG element, with white text labels placed at the centroid of each arc for clarity.

JJennKempCodes
83% 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
83% match