Arc Tween

100%

✓ Published0🌍 Public

Last edited Jun 9, 2017

Created on Jun 9, 2017

The visualization demonstrates smooth animated transitions of arc segments using D3 v4’s `transition.attrTween`. It shows a circular foreground arc that repeatedly updates its angle, while a secondary set of colored arcs animates inward and outward between paired data values. The `d3.arc` generator builds SVG path strings with bound start/end angles, and the tween interpolates the endAngle over 750 milliseconds for the main arc and 1750 milliseconds for the colored segments. Random angle targets drive the main arc, while paired arrays (e.g., `[0, 0.25, 0.4, 0.65, 0.9, 1]`) control the secondary arcs’ expansion and contraction.

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.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/5100636'>Arc Tween</a>

gpl-3.0 Licensed

Similar vizzes

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

90% match

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

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

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

85% match

Loading thumbnail…

Animated Arcs

Four colored arc segments rotate continuously around a central point, changing their start and end angles to new random positions every few seconds. The animation uses D3 v4’s `d3.interval` to trigger periodic updates, and each transition relies on `transition.attrTween` with a custom `arcTween` function that interpolates between angle values using `d3.interpolate`. The SVG paths are generated by a `d3.arc()` generator, with each arc assigned a fixed inner and outer radius, forming concentric rings. The data is procedurally generated JavaScript, with random start angles and arc lengths derived from a random score.

TThanaporn-sk

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

83% match

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

80% match

Loading thumbnail…

Donut Transitions

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.

SSpaceActuary

78% match