Sized Donut Multiples

100%

Sized Donut Multiples

✓ Published0🌍 Public

Last edited Feb 15, 2018

Created on Feb 14, 2018

Sized Donut Multiples uses d3.pie and d3.arc to render three donut charts, one per case in a CSV dataset, with each donut’s radius scaled by the square root of its total energy consumption via d3.scaleSqrt. The code uses d3-selection’s `.each()` to bind parent and child data, filtering and ordering arcs according to a predefined category list. Arcs are colored by category via a hardcoded palette, with labels showing the case name, total value, and unit. The SVG output is a technical demonstration, not recommended for comparing distributions across cases.

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.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4c5fad723c87d2fd8273'>Sized Donut Multiples</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Pie Multiples

Four small donut charts display proportional breakdowns for each row of a two-dimensional numeric array. D3 v3’s `d3.layout.pie` computes arc angles, while `d3.svg.arc` renders the path shapes. Each chart uses an inner and outer radius, with colors assigned by index from `d3.scale.category20c()`. The SVG elements are generated per row, and the totals for each row differ.

Mmbostock

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

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

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

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

79% match

Loading thumbnail…

D3: Pie layout

This example shows a donut chart built with D3.js, displaying six numeric values as colored arc segments arranged around a central hole. Each segment is labeled with its corresponding value, positioned at the centroid of the arc. The visualization uses the `d3.pie()` layout to compute the angles and `d3.arc()` to generate the SVG path shapes, with an ordinal color scale (`d3.scaleOrdinal` and `d3.schemeCategory10`) assigning colors. Data is hardcoded as an array, and all rendering is done via SVG elements in d3.v4.

深深度碎片

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

78% match

Loading thumbnail…

donut

This donut chart uses D3 version 6 to render a single, five-segment ring where each segment is a wedge of equal value. The visualization employs `d3.arc` with dynamically calculated inner and outer radii based on the segment index, and `d3.pie` to compute the arc geometry. Each wedge is filled with a color from `d3.scaleSequential` using the `d3.interpolateRainbow` palette, and labeled with its data index. The entire SVG group is positioned using a CSS transform, though the code’s intended rotation animation is present but not functional, as the rotation angle is fixed to zero.

MMTR

78% match