Skip to main content
100%

fresh block

✓ Published0🌍 Public
Aarcox80
Last edited Sep 24, 2017
Created on Sep 23, 2017

A donut chart displays the age distribution of a population from a CSV file, with seven categorical age groups shown as colored arcs and white labels. The visualization uses D3 v4’s `d3.pie` and `d3.arc` to generate the SVG paths, while `d3.scaleOrdinal` assigns a categorical color palette. Labels are positioned using `d3.arc` centroids, and the chart is centered within a 960×500 SVG canvas. Data is loaded asynchronously via `d3.csv`, and each arc’s fill color corresponds to its age category.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

fresh block

This example shows the age distribution of a population as a donut chart, with each slice labeled by its age bracket and colored using an ordinal scale. The visualization is rendered as SVG using D3 v4, applying `d3.pie` to compute the arc angles and `d3.arc` to generate the paths and label positions. Data is loaded from a local CSV file with population counts per age group, and the chart centers itself in an 960×500 viewport. The code uses D3’s data join to append arc groups, paths, and text elements.

Aadamverdin
94% match
Loading thumbnail…

fresh block

This example shows a donut chart that visualizes categorical data as percentage-labeled arcs, with each slice colored from a seven-color ordinal scale. The visualization is built with D3 v4, using `d3.pie` to compute arc angles, `d3.arc` for both the filled slices and their labels, and `d3.scaleOrdinal` for coloring. Data is loaded from a CSV file via `d3.csv`, with values parsed to numbers and percentages calculated relative to the total. The SVG rendering positions labels using `labelArc.centroid`, and the chart is centered on a 960×500 canvas.

Aadgramigna
91% match
Loading thumbnail…

fresh block

A pie chart displays the percentage distribution of values from a CSV file, with each slice labeled by its share of the total. The visualization uses D3 v4’s `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to compute angles, draw SVG paths, and assign a categorical color palette. Labels are positioned via `labelArc.centroid` and formatted with `d3.format`. Data is loaded asynchronously with `d3.csv`, and the chart is rendered as SVG centered on a 960×500 canvas.

Aadgramigna
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…

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

fresh block

A donut chart displays the value and percentage for eight iPad models, with each wedge colored by a categorical scale and connected to a labeled callout line. The visualization uses D3 v3’s `d3.layout.pie` and `d3.svg.arc` to generate the arcs, while a custom `relax` function iteratively adjusts overlapping text labels, shifting their `y` positions and updating the corresponding line endpoints to reduce clutter. The code mixes D3 v3 and v4 scripts, rendering to SVG.

KKacieW
81% match