A Fair Number of Transitions

100%

A Fair Number of Transitions

✓ Published0🌍 Public

Last edited Sep 17, 2018

Created on Sep 14, 2018

One hundred thousand points travel along their own three-segment paths, converging and diverging through six rough vertical zones as they loop back and forth. The animation runs ten cycles, building a glowing field of motion trails on a 960 by 500 canvas. Each point’s path is computed from random start and end points with clustered control points, and the renderer uses Canvas `getImageData` and `putImageData` to accumulate bright pixels directly, with `requestAnimationFrame` driving the frame loop. The code is a hand-optimized, D3-free implementation focused on raw performance.

AI-generated description

An effort to see how many points I can animate along their own paths (each path has three segments, each path goes through 2 of six rough areas).

100 000 nodes are animated in this (10 loops).

Some browsers may not work with this many transitions. Based on quick work for this SO question.

No D3, awkward code to try and improve performance, not as readable as I'd like, but the results are pretty good (for me it is best on Chrome, Firefox is slower, haven't tried others yet).

There are 500 000 node and 1 000 000 node versions of this (same code, more nodes, just to see not intended for actual use).

Updated to swap parseInt for Math.floor, as noted by RioV8 in linked SO question as an improvement

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

76% match

Loading thumbnail…

Animate thousands of points with canvas and D3

This block animates thousands of points between five different layouts—sine wave, phyllotaxis, spiral, and grid—using HTML5 canvas for rendering and D3’s timer and easing functions to drive the transitions. The animation cycles continuously through the layouts, interpolating each point’s position with a cubic ease over 1.5 seconds. Points are stored as plain objects with assigned colors from a viridis sequential scale, and canvas rendering keeps the frame rate smooth even with 7,000 points.

Aale0xB

76% match

Loading thumbnail…

Canvas, Lots of Transitions

A grid of 19,200 small rectangles fills the canvas, each transitioning from steelblue to lightgreen while moving from the top-left corner to the bottom-right. The animation uses d3.v4 transitions with staggered delays based on each cell’s grid position. Rendering is handled by Canvas 2D API calls within a `requestAnimationFrame` loop, while a detached custom D3 selection manages the rectangle attributes without creating DOM elements.

Aandrew-reid

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

74% match

Loading thumbnail…

points

One hundred thousand points render as colored particles in WebGL, smoothly morphing between different distributions—random walks, phyllotaxis spirals, sine waves, and grids—at regular intervals. The animation uses regl to draw points and interpolate between buffer states in the vertex shader, with a viridis colormap applied per point. A control panel lets viewers adjust point radius and the total number of points.

11wheel

74% match

Loading thumbnail…

Animate thousands of points with canvas and D3

This block animates 7,000 colored points between five different layouts—sine wave, phyllotaxis spiral, spiral, and grid—using canvas and D3. Each point stores its current position, and when the user clicks, the `animate` function captures the start and target positions, then uses d3-timer and d3-ease to interpolate over 1.5 seconds before drawing the points to a 2D canvas context. The layouts are generated by mutating the x and y properties of the points array with functions like `sineLayout`, `phyllotaxisLayout`, and `gridLayout`. The canvas is scaled to the device pixel ratio for crisp rendering, and clicking the canvas stops the animation and shows a play control. The example is from a Bocoup blog post about smoothly animating thousands of points with HTML5 canvas and D3.

AAjayyy

74% match

Loading thumbnail…

Animate thousands of points with canvas and D3

This example shows 7,000 points smoothly animating through a repeating sequence of five layouts: sine wave, phyllotaxis spiral, spiral, phyllotaxis, and grid. The animation updates point positions by interpolating between source and target coordinates over 1.5 seconds using `d3.timer` and an easing function. Instead of SVG, it draws each point as a filled rectangle on an HTML5 Canvas via `getContext('2d')`, allowing for thousands of elements without performance degradation. Point colors are assigned using `d3.interpolateViridis`.

TThanaporn-sk

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

73% match