Donut Transitions

100%

Donut Transitions

✓ Published0🌍 Public

Last edited Jun 11, 2017

Created on Jun 9, 2017

This example animates a donut chart through a sequence of three datasets, demonstrating how wedges split, translate, and reunite as values change across transitions. It uses D3 v3’s `d3.svg.arc`, `d3.layout.pie`, and a custom `transition.attrTween` to interpolate arc geometry, including inner and outer radii and start/end angles. The code chains transitions with `setTimeout` to cycle through data states, relying on a square-root `d3.scale` to map summed values to radii and `d3.scale.category20` for color. The rendering targets SVG paths, with animation driven by D3’s transition system.

AI-generated description

This example demonstrates a complex chained transition for updating values in a donut chart, as considered by Robertson & Heer in Animated Transitions in Statistical Data Graphics. While fascinating to watch, users found the complicated transitions difficult to follow. For a simpler approach, see the Pie Chart Update series of examples.

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

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Donut Transitions v4

This example demonstrates a chained transition that updates a donut chart’s wedge values across three sequential datasets, using an animated tween to interpolate each arc’s start and end angles and outer radius. The visualization starts with seven wedges, morphs them into a single full circle, then multiplies them into three distinct slices, looping the cycle. Built with D3 v4, the code uses `d3.pie`, `d3.arc`, and `transition.attrTween` with a custom `tweenArc` function, while `d3.scaleSqrt` maps data sums to radial extents. The SVG rendering animates paths via `attrTween`, with a `setTimeout` driving the repeating transition.

SSpaceActuary

95% match

Loading thumbnail…

Donut Transitions

Two random ten-slice donut charts transition back and forth between states through a four-stage chained animation. The slices first split into two rings, then translate to align with their final positions, resize to match new values, and finally reunite into a single ring. The example uses d3.v3 with `d3.layout.pie` for arc generation and chained `.transition()` calls with `.attrTween` to tween the `d` attribute of SVG paths, interpolating start and end angles as well as inner and outer radii.

Mmbostock

89% match

Loading thumbnail…

http://stackoverflow.com/questions/32510101/d3-why-is-enter-selection-not-showing-any-transition-for-a-donut-chart?noredirect=1#comment52896340_32510101

This example demonstrates a dynamic donut chart that updates its data every 750 milliseconds, with smooth animated transitions for the arc segments and labels. The visualization uses D3.js 3.5.6 to render SVG paths and text, employing `d3.layout.pie` for data binding and `transition.attrTween` with a custom pie tween to interpolate start and end angles. A color scale assigns each category a distinct hue, while a center text element displays the total sum. The code includes custom label rotation logic to keep text readable around the ring.

FFrissAnalytics

85% match

Loading thumbnail…

Interactive donut chart with transitions

This interactive donut chart updates live as the number of data points changes, with each arc smoothly transitioning to a new size and position. Users can type a new count into an input field, triggering random data regeneration and a one-second animated redraw. The visualization uses D3 v3’s `d3.layout.pie`, `d3.svg.arc`, and `transition.attrTween` to interpolate arc geometry, while `setInterval` automatically re-renders every two seconds. SVG paths are colored via `d3.scale.category20`, and the code also handles entering and exiting arcs for dataset size changes.

TThanaporn-sk

84% match

Loading thumbnail…

Transition Between Three Views

The visualization demonstrates a smooth transition of a categorical fruit-count dataset between three chart types: a bar chart, a pie chart, and a donut chart. It starts with labeled bars, then animates each bar into a pie slice, and finally adjusts the inner radius to form a donut. The code uses D3.js v3 with SVG and custom tween functions on paths to interpolate geometric properties, while leveraging ordinal and linear scales for layout and category colors for encoding. The data is loaded from a CSV file.

DDarienLiang

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

82% match

Loading thumbnail…

Arc Tween

A donut chart demonstrates arc transitions using D3 v4. An orange foreground arc repeatedly animates to a new random end angle, while a static gray background arc represents the full circle. The code uses `transition.attrTween` with a closure that interpolates between the current and target end angles via `d3.interpolate`, updating the bound datum before recomputing the SVG path with `d3.arc`. Rendering is SVG, with transitions triggered every 1.5 seconds by `d3.interval`.

Mmbostock

82% match

Loading thumbnail…

updated donutchart

This example shows an animated donut chart that displays a percentage value at its center and updates its arc and color gradient automatically. The chart visualizes a data array where the third element (80%) drives the arc length and determines a six-stop linear gradient color scheme ranging from red to green based on the value. Built with D3 v5 and React, it uses `d3.arc` for the donut geometry, `transition.attrTween` with an interpolator to smoothly animate the arc between states, and a toggle button to switch between two datasets. The SVG rendering includes a static gray background arc and a foreground path filled via a dynamically configured `linearGradient`.

SSchmittYannic

82% match