Skip to main content
SimilarExport ZIP
100%

Donut Chart 3 layers w. filters

✓ Published0🌍 Public
PPatrick Wojda
Last edited Dec 20, 2016
Created on Dec 19, 2016

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

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:

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3887193'>Donut Chart</a>

gpl-3.0 Licensed

Similar vizzes

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

donut chart

This donut chart displays three proportional values as colored arc segments, with percentage labels positioned outside the chart. The visualization uses D3 v4’s `d3.pie()` and `d3.arc()` functions to compute segment angles and paths, rendering the SVG chart dynamically. An interactive element positions HTML labels via absolute styling, calculating their coordinates from the arc centroids and canvas dimensions. The static data is embedded in the code, with colors and suffixes defined per segment. Bare bones and functional, it demonstrates a simple, clean alternative to a standard pie chart.

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

Donut Chart D3

This interactive donut chart displays categorical data as colored arcs, with a hover effect that enlarges the selected segment. Built with React and rendered as SVG, it uses D3’s `pie` generator to compute arc paths and `scaleOrdinal` for the yellow, red, blue, and green color mapping. On mouse enter, the corresponding arc is redrawn with a larger `arc` radius, while a separate `hoveredArc` path is drawn beneath. The data is hardcoded as an array of `x` and `y` values.

SSiddharthMittal07
79% match