Interrupting Chained Transitions

100%

Interrupting Chained Transitions

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Apr 12, 2014

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.

AI-generated description

This example demonstrates how to interrupt chained transitions. Normally when a chained transition ends, it immediately schedules the next transition. However, blindly scheduling the next chained transition can prevent a different, non-chained transition from taking over — such as the “Stop The Music” button here.

To ensure that a chained transition does not interrupt a different transition, you can check the number of scheduled transitions on the current element: this.__transition__.count. Normally during a chained transition, only one transition will be scheduled; if two transitions are scheduled, then the chained transition should stop.

D3 uses this check internally to implement transition.remove.

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

79% match

Loading thumbnail…

Chained Transitions

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.

Mmbostock

78% match

Loading thumbnail…

Transition Speed Test

This example demonstrates the speed of D3’s transition engine by animating a 48×48 grid of small square divs from white to black. Clicking the button triggers a one-second transition on all 2,304 elements simultaneously, changing their background-color and outline-color. The code uses d3.select, d3.range, and transition().duration().style() to apply the animation, responding to a click event on a button. The grid is rendered as HTML divs styled with CSS floats, and the transition is built entirely with D3 v3, avoiding jQuery or CSS-only approaches.

Mmbostock

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

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

74% match

Loading thumbnail…

Transform Transitions

A grid of colored squares animates in response to mouse hovers, demonstrating smooth interpolation between different 2D SVG transforms. Each rect transitions from its original translate to a combined translate, scale, and rotate, then shrinks and fades before being removed. The code uses d3.v3 transitions with `.attr("transform")` to leverage matrix decomposition, automatically decomposing transforms into canonical translate, rotate, scale, and skew components. The visualization is built with a data-joined SVG rect per grid cell, filled with HSL colors based on position, and rendered entirely through D3’s selection and transition APIs.

Mmbostock

74% match

Loading thumbnail…

Transform Transitions II

A grid of 1,200 small colored squares, each assigned a position via inline CSS `transform` and a hue from `d3.hsl`, reacts to mouseover by flying to the center of the viewport. The selected square scales up and rotates 180 degrees using D3’s `transition().style("transform")`, which interpolates the CSS transform string, then shrinks and removes itself. Built with d3.v4 and `d3.range`, the animation leverages D3’s transform interpolation to smoothly tween translate, scale, and rotate values, while `raise()` brings the active square to the front.

Mmbostock

73% match

Loading thumbnail…

D3 Transitions - Chained Transition

Five circles animate across an SVG canvas, moving horizontally to new random positions before bouncing to new random sizes. The example demonstrates chained transitions in D3 v7, where the `d3.select` API chains multiple `.transition()` calls to sequence the position change over the first transition, followed by a second 750-millisecond transition with a `d3.easeBounce` easing function for the radius change. The update button triggers `updateAll()`, which regenerates random data for the `cx` and `r` attributes and re-applies the chained animation sequence.

SSubhendu Karmakar

72% match