Chained Transitions

100%

Chained Transitions

✓ Published0🌍 Public

Last edited Jun 7, 2023

Created on Feb 12, 2016

A dense field of 4,002 small square divs cycles through a three-step color transition from light gray to steel blue to orange and back to gray. The chained animation is built with d3.v4 and the experimental d3-transition API, using `d3.active` to reselect elements and `styleTween` to interpolate RGB colors via `d3.interpolateRgb`. Each transition is delayed, with a recursive `repeat` callback restarting the sequence indefinitely.

AI-generated description

A test of chained transition using d3-transition’s new d3.active.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Chained Transitions

Fifty black circles, each representing one step in a 50-point scale, are arranged along the left edge of an SVG. Chained transitions, created using `transition.transition` and `d3.active`, repeatedly sweep each circle horizontally across the frame and back, with staggered delays creating a cascading wave effect. The circles’ fill colors interpolate between light yellow and dark blue via a linear scale with `d3.interpolateHcl`. The animation runs concurrently on all elements, inheriting the original transition’s reference time to ensure synchronized looping.

Mmbostock

86% match

Loading thumbnail…

Chained Transitions II

Fifty circles, arranged vertically and colored by a linear scale interpolating through HCL color space, slide left and right across the SVG canvas in repeating chains. Each circle’s initial delay staggers its motion, and the `slide` function uses `d3.active` to restart the sequence after each transition completes. The example demonstrates chained transitions in D3 v4, binding data to a `d3.scalePoint` domain and animating the `cx` attribute with `transition.attr`.

Mmbostock

83% match

Loading thumbnail…

Chained Transitions II

The visualization shows a vertical column of 50 black circles that move in a choreographed wave, sliding horizontally across the screen and then returning, one after another. The animation uses chained transitions to create a continuous looping sequence. Built with D3 v4, it employs `d3.active` to manage each circle’s transition chain, with `d3.scalePoint` positioning the circles vertically and `d3.scaleLinear` mapping the color gradient from yellow to blue based on the circle’s index. The code uses SVG circle elements and CSS styling, with each circle’s fill determined by its position in the modulo sequence.

HHelenaV

81% match

Loading thumbnail…

Chained transition with different elements

Three heading elements—"first," "second," and "third"—fade out and back in to green, one after another, using a chained transition. The code manually triggers each element’s animation by filtering the selection and recursing through a custom `transitionNext` function, rather than relying on D3’s built-in selection chaining. It uses `d3.selectAll`, `.data([1000,2000,3000])` for per-element durations, and `.transition()`, `.style()`, and `.on("end")` to sequence the animations. The example demonstrates explicit control over chained, element-specific transitions with a single selection.

EEE2dev

81% match

Loading thumbnail…

Chained Transitions

Fifty circles, each representing a discrete ordinal value, form a vertical column on the left edge of a 960 by 500 pixel canvas. The animation shows the circles moving horizontally back and forth, creating a chained, wave-like effect as each circle starts its journey after the previous one completes a traversal. The d3.js library (version 2.9.1) drives the motion, using a custom `slide` function to schedule `transition()` calls per circle, with each transition's duration dynamically calculated from the `Date.now()` timestamps to create the sequential delay. The source code is a single HTML file from a gist, with circles styled via CSS.

GGerHobbelt

80% match

Loading thumbnail…

Chained transition with different elements

The example demonstrates a chained transition sequence where three heading elements, labeled "first," "second," and "third," fade out and then back in one after another, each turning green after its second fade-in. The code uses D3 v4’s selection and transition APIs, including `.transition()`, `.duration()`, and `.style()` with an opacity tween, to chain two transitions per element. A custom recursive function, `transitionNext()`, triggers each element’s animation in order, using a filter on the bound data array `[1000, 2000, 3000]` to select the current index, and the `.on("end")` event to advance to the next element. The data source is hardcoded in the selection’s data binding, and rendering is entirely DOM-based via HTML headings.

EEE2dev

80% match

Loading thumbnail…

Simple transition chaining in v5

A blue circle moves across an SVG canvas in three sequential transitions, each lasting four seconds. First, its horizontal position animates from the left side to the right side; then its radius grows from 20 to 40 pixels; finally, its fill color changes from blue to red. This example demonstrates transition chaining in D3 v5, where calling `.transition()` after a previous transition schedules the next animation to begin automatically. It uses D3’s `transition` API with `.duration()` and `.attr()`/`.style()` methods.

Dd3noob

80% match

Loading thumbnail…

Interrupting Chained Transitions

A grid of black squares pulses with random colors through chained transitions, each square cycling indefinitely until the “Stop The Music” button interrupts the sequence. Built with D3 v3 and SVG animation, the example shows how to prevent chained transitions from overriding a separate transition by checking `this.__transition__.count` before scheduling the next step. Clicking the button triggers a single non-chained transition that turns all squares dark gray, and the chain stops when the count exceeds one.

Mmbostock

78% match