Animate thousands of points with canvas and D3

100%

Animate thousands of points with canvas and D3

✓ Published0🌍 Public

Last edited May 18, 2017

Created on May 18, 2017

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.

AI-generated description

Animate thousands of points with canvas and D3

Using D3 and d3-transition works great when animating hundreds of points with SVG, but performance breaks down when you need to animate more than a thousand. This block demonstrates a simple approach to animating thousands of points between different layouts using canvas, d3-timer, and d3-ease.

See the blog post for more details.

forked from <a href='http://bl.ocks.org/pbeshai/'>pbeshai</a>'s block: <a href='http://bl.ocks.org/pbeshai/65420c8d722cdbb0600b276c3adcc6e8'>Animate thousands of points with canvas and D3</a>

mit Licensed

Similar vizzes

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

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

92% match

Loading thumbnail…

canvas-squares

The visualization displays a grid of small squares that animate across the canvas in rhythmic waves. Using D3.js and the Canvas API, the code schedules repeated intervals that spawn rectangular shapes, which grow from thin lines into full squares while moving in alternating directions. Each square’s animation is driven by a custom timer that interpolates between start and end coordinates, with colors cycling through a palette of blues, purples, and greens. The effect creates a cascading, kinetic pattern across the full viewport, with random elements influencing which squares appear and how they stagger.

11wheel

76% match

Loading thumbnail…

A Fair Number of Transitions

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.

Aandrew-reid

76% match

Loading thumbnail…

Canvas Scatterplot

Two thousand normally distributed points render as a steelblue canvas scatterplot. The code generates data with d3.randomNormal, binds it to custom elements with a d3 data join, and draws the points using Canvas 2D context arcs. A d3.timer repeatedly calls the draw function for 300 milliseconds, clearing and repainting the canvas to animate the visualization. The example uses d3.v4, with linear scales mapping the domain from 2 to 8 onto a 1400 by 750 pixel canvas.

JJverma

76% match

Loading thumbnail…

d3 and canvas

D3 version 4 and the HTML5 Canvas API draw animated, colored grids of cells whose count is set by user input between 1 and 10,000. The code binds data to custom DOM elements, using transitions to animate cell size and fillStyle, then a d3.timer repeatedly invokes a draw function that clears and repaints the canvas. A d3.scaleSequential with d3.interpolateSpectral maps data values to colors.

Llars verspohl

75% match

Loading thumbnail…

D3 Scatterplot (Animations)

This D3 v3 scatterplot displays 15 randomly generated data points on an SVG canvas with linear scales and axes. The visualization highlights animated transitions: clicking the header text regenerates the dataset, updates the x and y scale domains, and smoothly transitions the circles to their new positions using D3’s `.transition()` method. The code uses `d3.svg.axis`, `d3.scale.linear`, and SVG circle elements, with random integer values generated in JavaScript.

WWilliamQLiu

75% match

Loading thumbnail…

d3 and canvas

This example demonstrates how to bind data to custom virtual elements and draw them to an HTML5 canvas using d3.v4. It renders a colorful grid of rectangles, where each cell’s size and fill style are animated via transitions. The code uses `d3.select` to append a canvas, `d3.range` to generate data, and `d3.scaleSequential` with `d3.interpolateSpectral` for color mapping. A `d3.timer` drives repeated canvas redraws, while the `draw()` function reads each custom element’s attributes (x, y, width, height, fillStyle) to paint the scene.

AAjayyy

75% match