Donut Transitions

100%

Donut Transitions

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Dec 19, 2012

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.

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.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Pie Chart

Ten random values are visualized as a pie chart that first animates from a single point into a full circle, then morphs into a donut chart with a hole in the center. The animation uses two successive `transition.attrTween` calls on the path's `d` attribute, with `bounce` and `elastic` easing functions. The SVG is built using the D3 v3 API, including `d3.layout.pie()`, `d3.svg.arc()`, and `d3.scale.category20()` for coloring each slice.

Mmbostock

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

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…

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

81% match

Loading thumbnail…

Pie charts labels

This variation of a donut chart demonstrates how to label each slice with text and leader lines that extend outward. A button click triggers a transition to new random data, with all elements—arcs, labels, and polylines—smoothly animating to their new positions. The visualization uses D3.js v3, employing `d3.layout.pie` for the pie layout, `d3.svg.arc` for the donut and outer arcs, and `transition.attrTween` with `d3.interpolate` to morph values. Text labels are positioned via `outerArc.centroid` and aligned left or right based on the slice’s mid-angle.

FFrissAnalytics

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

78% match

Loading thumbnail…

Amazing pie

An animated donut chart displays eight arcs sized by the Fibonacci sequence, with proportional segments revealed through a sweeping transition. The visualization uses D3 v4’s `d3.pie` layout with padding, `d3.arc` for outer, inner, and corner radii, and a custom `arcTween` function via `transition.attrTween` to interpolate each arc’s start and end angles. A categorical color scale from `d3.scaleOrdinal(d3.schemeCategory10)` fills the segments, rendered as SVG paths within a centered group.

DDDDDDanica

78% match

Loading thumbnail…

pie chart transition example

This example shows a single, animated pie chart where the foreground arc transitions to a new random angle every 1.5 seconds, with the background arc remaining fixed at 100%. Built with D3 v5, it renders two SVG path arcs using a custom `d3.arc` generator with bound inner and outer radii. The animation is driven by `d3.interval` and `transition.attrTween`, which interpolates the `endAngle` value in data space before computing the new path string, ensuring smooth angular transitions.

SSchmittYannic

77% match