Catch me

100%

✓ Published3🌍 Public

Last edited Apr 2, 2020

Created on Mar 31, 2020

Two framed photographs sit side by side on a blank canvas, one on the left and one on the right, with a single image sliding horizontally between them in an endless chase. Using d3 v5, the animation is driven by a recursive `repeat()` function that applies chained `transition()` calls with `duration` and `attr('transform')` to move the sliding image, while `Math.random()` introduces variable speed each cycle. The images are loaded as SVG `<image>` elements with hard-coded Google-hosted URLs, and the scene is centered via a `<g>` transform.

AI-generated description

MIT Licensed

Similar vizzes

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

68% match

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

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

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

67% match

Loading thumbnail…

Hello world!

A working black-and-white canvas displays a row of five circles that repeatedly adjusts its scale via a D3 transition, while two HTML overlay labels read “Hello world” and “a random walk?...”. The circles’ radii and fill color update on a random interval, switching between blue and gray based on a random threshold. Built with D3 v7, the example demonstrates SVG rendering and animation through D3’s `join` method and `transition` style, with a simple `setInterval` driving the stochastic size and color changes.

Bblockmarket

66% match

Loading thumbnail…

D3 Transitions

Six colored circles of varying sizes move across a light green canvas, growing from and shrinking to a radius of zero at different speeds. The visualization demonstrates the D3 transition API, using a slow two-second transition to animate the circles' entry and exit by scaling their radius, while a fast 500-millisecond linear ease animates position updates. The sketch initializes six data points with id, x, y, r, and fill attributes, then uses D3's `select`, `transition`, and `easeLinear` functions to orchestrate the dynamic reshaping of the circle group. A video embed links to a YouTube demonstration of the transition effects.

SShad Frigui

66% match

Loading thumbnail…

Untitled

A vertical column of 50 circles animates across an SVG canvas, cycling horizontally in a loop. The circles are colored along a dark-to-light scale using `d3.scaleLinear` with HSL interpolation, creating subtle banding. D3 v4 selects the SVG, appends the circles, and chains `transition` calls with staggered `delay` and recursive `on("start", repeat)` to move each circle from left to right and back, demonstrating fundamental DOM manipulation and animation.

Jjesramyep1263

65% match

Loading thumbnail…

static-transition

A set of four parallel line charts displaying randomly generated data, with each chart independently redrawn every five seconds. The charts are rendered in SVG using D3's line generator and axes. Superimposed on top is a translucent canvas layer that constantly draws random black and white rectangles, creating a static-like visual noise effect. During each transition, the canvas alternately switches between drawing only black squares with a larger size and then both colors with a smaller size, while the underlying SVG charts update.

11wheel

65% match