regl-ladder

100%

✓ Published0🌍 Public

Last edited Sep 13, 2018

Created on Sep 13, 2018

This animated scatterplot uses WebGL to render 20,000 points representing the economic mobility of white and black men, arranged in a "ladder" comparing outcomes across income quintiles. Each dot eases along a path from its starting position to a target percentile line, with blue and orange encoding racial groups. The visualization iterates from a static SVG version through canvas-based approaches before settling on a regl implementation for performance, enabling many more points on screen. The final version optimizes rendering by passing precomputed arrays of attributes to the vertex shader and animating the points along their trajectories over time.

AI-generated description

Rough draft of this chart.

We started out with a SVG animation, tried out Elijah's canvas sankey particles and ended up rewriting in regl to get more dots on the screen.

The final version gets better performance by passing in array of attibutes to the vertex shader - I'm not sure why that is.

Update: Ricky Reusser points out that I was creating a new array of points every frame with:

attributes: {x: () => data.map(d => d.x)}

This is faster:

attributes: {x: => data.map(d => d.x)}

Also! pow is undefined for negative numbers, so the points take a different path on different devices.

Similar vizzes

Loading thumbnail…

regl-ladder

This example animates 20,000 points representing race and class mobility for white and Black men, based on a rough draft of a New York Times chart. Each point moves horizontally across the screen while easing vertically between starting and ending income positions, with blue and orange dots distinguishing groups. The animation is rendered with regl, a WebGL library, using custom vertex and fragment shaders to achieve high performance. It also includes an SVG-based initial version and a canvas particle approach, both referenced in the README, and uses d3.js for scales and layout.

11wheel

90% match

Loading thumbnail…

regl-ladder-2

A cluster of 100,000 colored points animates across the screen, moving in a repeating wave pattern with a sinusoidal x-shift and vertical bobbing. The visualization demonstrates a performance optimization in regl, a WebGL library: passing all point attributes (position, color, speed) as a single packed array per frame outperforms passing separate attribute arrays, enabling 60 fps versus the slower alternative. Using regl’s shader system and GPU buffers, the code animates points via a cubic easing function, with colors alternating between blue and orange based on parity. The data is generated procedurally, with random x, y, and speed values for each point.

11wheel

81% match

Loading thumbnail…

ladder-sm

This visualization shows intergenerational income mobility across racial groups and genders by plotting the probability of a child reaching each income quintile given their parents' income quintile. Each chart displays stacked bars representing cumulative probabilities, with bar opacity encoding the child's income level. The code loads tabular data from a TSV file, uses d3.nest and d3.conventions to organize and scale the data, and renders SVG rects with tooltips via d3.attachTooltip.

11wheel

76% match

Loading thumbnail…

regl-hurricane

Animated WebGL visualization of 10,000 line segments that continuously morph between different geometric patterns—a circle, then two distinct random point distributions. The code uses the regl framework with custom GLSL vertex and fragment shaders to interpolate between precomputed buffer states, cycling through three datasets in a loop. Line color shifts from blue to red based on each segment's position index, while d3 generates the underlying point data and easing functions control the smooth transitions.

11wheel

71% match

Loading thumbnail…

regl-circles

Twenty thousand colored circles fall from the top of the viewport, then settle into horizontal bands based on each circle's speed and size. Two quantized scales map circle index to a target row, and a WebGL shader renders each point with a soft-edged stroke and rounded fill. The animation cycles continuously via a REGL frame loop, with position and color computed per frame in the vertex and fragment shaders using D3 scales and lodash for data shuffling.

11wheel

68% match

Loading thumbnail…

regl-hot-server

A dense cluster of 100,000 points animates through looping random walks, with colors transitioning along the viridis colormap. The visualization cycles between five precomputed datasets, interpolating point positions in a WebGL vertex shader. Built with regl and React, it demonstrates a hot-reloading workflow where editing `script.js` updates the page without a full reload, using hot-server and watchify to stream changes directly to the browser.

11wheel

67% match

Loading thumbnail…

Fork of Analysis using scatterplots

This visualization combines scatterplots and animated bar-like line marks to explore median family wealth in the US from 1983 to 2016, split by race. Users can switch between White, Black, and Hispanic households via a dropdown menu, triggering a D3 transition that updates both the circles and vertical lines. The data is sourced from the Urban Institute and US Census via TidyTuesday, normalized to 2016 dollars. The code uses D3 v6 APIs such as `scaleLinear`, `axisLeft`, `axisBottom`, and `transition`.

Ggrigoriu-stefan-iulian

67% match

Loading thumbnail…

income-transition

The visualization "income-transition" animates 1,500 circles representing people moving from a starting income quintile to an ending one, illustrating income mobility. Rendering with SVG via a custom `d3.select` and `d3.conventions` API, the animation chains transitions to move circles horizontally across the canvas, fading them in and out. The data is synthetic, generated with `d3.range` and random quintile assignments, while a tooltip div is prepared in the script.

11wheel

67% match