Arc Tween

100%

✓ Published0🌍 Public

Last edited Jul 15, 2016

Created on Mar 6, 2013

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

AI-generated description

A commented example of tweening arcs; see Pie Chart Update, II and Arc Tween (Clock) for older examples. (There’s also The Amazing Pie and Donut Transitions if you want to get fancy.) See the API reference for transition.attrTween and my tutorial Working with Transitions for more.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

2019 Arc Tween

A circular gauge displays a background arc and an orange foreground arc representing a value, which updates to a new random angle every few seconds. The animation uses a custom `transition.attrTween` on the `d` attribute, interpolating the endAngle in data space via `d3.interpolate`. The arc path is computed with `d3.arc`, and the transition duration is set to 100,000 milliseconds, creating a smooth, continuous rotation.

MMisunoKitara

87% match

Loading thumbnail…

arc tween example

An animated arc chart demonstrates pie-segment transitions using D3 v4’s `transition.attrTween`. A white foreground arc rotates to a new random angle every few seconds, while a segmented, multicolored ring around it sequentially fills or empties its sections. The code defines arc generators via `d3.arc`, binds data from a fixed array, and computes path interpolations between angles using `d3.interpolate`. SVG elements render the background ring and active arcs, with transitions triggered by `d3.interval`.

FFrissAnalytics

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

82% match

Loading thumbnail…

animated arc

This example animates a set of orange arc segments that expand and fade out over time, creating a wave-like effect. The visualization uses SVG paths generated by the `d3.arc` generator, with a `clipPath` (a 200×200 rectangle) to constrain the arcs' visibility. A single transition, invoked via `transition.attrTween`, interpolates each arc's inner and outer radii from 0 to 300, while `style("opacity", 0)` fades them out. The animation runs over 4 seconds with staggered delays of 200 milliseconds per arc, using `d3.easeLinear`. Ten arcs are created from an array of empty objects, and the code relies on D3 v4.

EEE2dev

82% match

Loading thumbnail…

Animated Arcs

Four concentric animated arcs rotate continuously around a central point, each with a distinct color and its own random start and end angles. The arcs periodically change their sweep length and position, creating a dynamic, looping visual rhythm. Built with D3 v4, the example uses SVG paths and `d3.interval` to trigger transitions, while `transition.attrTween` and `d3.interpolate` smoothly animate each arc’s angles. The code generates random data for four arcs with varying radii and colors, drawing them with the `d3.arc` shape generator.

FFrissAnalytics

81% match

Loading thumbnail…

Arc Corners III

Two donut charts display the same Fibonacci sequence as a series of arcs. One chart uses straight-edged arc segments, while the other animates its corner radius between zero and the maximum possible, transitioning from sharp to fully rounded corners. The animation uses a cubic-in-out easing over 2.5 seconds. The code uses `d3.layout.pie` and `d3.svg.arc` with its `cornerRadius` method, rendering to SVG with `d3.select`, `d3.timer`, and the `d3.ease` function.

Mmbostock

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

79% match

Loading thumbnail…

Untitled

A donut chart displays a value range between two labeled extremes, with a yellow arc on the right and an orange arc on the left, separated by horizontal lines. The chart animates by repeatedly expanding the yellow arc’s end angle using `d3.interval` and `transition.attrTween` with an arc interpolator. The visualization is built with D3 v4, rendering SVG paths generated by `d3.arc`. Static text labels and connector lines annotate the chart, while the animation runs continuously in a loop.

Bbharatbobby

79% match