Animate thousands of points with canvas and D3

100%

Animate thousands of points with canvas and D3

✓ Published0🌍 Public

Last edited Mar 17, 2017

Created on Mar 17, 2017

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`.

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

92% 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…

Canvas Scatterplot

This example shows a scatterplot of 20,000 randomly generated data points, each positioned on a two-dimensional Gaussian distribution. The visualization animates by redrawing the canvas for 300 milliseconds, creating a flickering effect as the points appear. The code uses the Canvas API directly with `getContext('2d')` for rendering, while employing a custom D3 selection abstraction to bind data to circle elements with `d3.range`, `d3.randomNormal`, and `d3.scaleLinear`. The points are drawn as steelblue circles via `context.arc` and `context.fill` within a repeated timer loop using `d3.timer`.

JJverma

75% match

Loading thumbnail…

animating data cleaner code

This example uses D3 v7 to create an animated, generative visualization of circles. It displays a dynamic sine-wave pattern where 10 to 15 circles move vertically and change radius over time, rendered as SVG elements on a full-window canvas. The animation runs at a 60 FPS interval, with each frame updating the `cx`, `cy`, and `r` attributes of the circles via `selectAll` and `.join`. The periodic motion is computed using `Math.sin` for both position and size, creating a smooth, evolving sine-wave composition.

KKerim

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…

D3 Selections

This example demonstrates a dynamic line chart created with D3, where 15 points oscillate vertically over time based on a sine function. The visualization uses D3's `select` and `range` APIs to build an SVG canvas and animate both circles and a connected path. Using D3's `.join()` method, the code efficiently updates element attributes on each frame, with a `setInterval` timer driving the animation at 20ms intervals. The implementation uses the React framework and renders purely through SVG elements, with the data generated procedurally from a mathematical function rather than external sources.

Ddanperkins

74% match

Loading thumbnail…

Canvas Scatterplot

This example renders 20,000 randomly generated points as a Canvas scatterplot, with x, y, and radius values sampled from normal distributions. It demonstrates a color-picking technique for interaction: a hidden canvas draws each point in a unique RGB color, and the visible canvas draws them in steelblue. On mousemove, the code calls Canvas `getImageData` on the hidden canvas to identify the point under the cursor, then displays a tooltip with its coordinates and radius. It uses d3.scaleLinear for axes and d3.timer for a brief animation loop.

JJverma

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

74% match