fresh block

100%

✓ Published0🌍 Public

Last edited Sep 23, 2017

Created on Sep 23, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This example visualizes the population distribution of Israel by age group, combining a D3 pie chart with a CanvasJS column chart. The pie chart displays age ranges (0-14 through 65+) as colored arcs with labels, using d3.csv, d3.arc, and d3.pie. The column chart shows the same data as vertical bars with population values as index labels. Both charts pull from the populationAge.csv file, while the static HTML table provides summary totals and percentages, and the page also incorporates the Bootstrap CSS framework.

MMusicGindos

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

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…

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

82% match

Loading thumbnail…

fresh block

This example shows a simple pie chart visualizing three data values (10, 20, 100) as proportional slices. The chart uses an SVG rendering with D3 v4, creating arcs with a white stroke separation. Colors are assigned via a categorical ordinal scale with a muted three-color palette. The pie layout uses `d3.pie` with null sorting, while `d3.arc` defines the slice geometry, keeping the label text commented out. The visualization is static, with the data hardcoded in the script.

KKacieW

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…

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

81% match

Loading thumbnail…

Fork of May 3

This example shows a donut chart displaying population data for different age groups, with each segment labeled by its corresponding age. The visualization uses D3.js v4 with the `d3.arc`, `d3.pie`, and `d3.requestTsv` APIs to load and process the TSV data. It renders the chart on an HTML5 Canvas element, drawing each arc segment in a distinct color and placing text labels at the centroid of each arc using the Canvas `fillText` method. The chart is centered within a 960×500 canvas.

Mmauricio-acosta-reyes

81% match