Transitioning Numbers

100%

Transitioning Numbers

✓ Published0🌍 Public

Last edited Jun 28, 2019

Created on Jun 28, 2019

Three rows of nested colored squares represent random three-digit numbers, with each row displaying hundreds, tens, and ones as large, medium, and small rectangles in a shared color palette. Every three seconds, new random values replace the previous ones, and the squares animate their positions and sizes via D3 v4 transitions, growing from zero or shrinking to nothing as they enter or exit. The SVG rendering uses `d3.select`, data joins with `selection.merge`, and chained `transition` calls to smoothly update the layout, which is computed from each digit’s value and arranged in compact grids.

AI-generated description

Similar vizzes

Loading thumbnail…

Square Grid

This visualization displays a changing quantity as a grid of colored squares, where each square represents one unit, arranged so small rows of ten, groups of one hundred, and large rows of one thousand allow quick reading of exact counts by powers of ten. The count updates randomly, with squares animating in and out using `transition.attr("width", 0)` and `transition.delay` based on index. The SVG rendering uses `d3.select` and `d3.range` to manage the cells, and a `d3.interpolateNumber` tween animates the text label. The code uses the D3 v3 library and an interval timer to trigger updates.

Mmbostock

80% match

Loading thumbnail…

fresh block

The visualization animates a grid of square cells that fills and empties to demonstrate count transitions, cycling between zero and a random number up to 9,999. It shows how a dynamic numeric label updates in sync with the cell layout. The code uses D3 v4 with SVG rendering, employing `transition.attr("width", ...)` and `transition.attr("width", 0)` for enter/exit animations, plus a text `tween` with `d3.interpolateNumber` to smoothly change the displayed count. The grid groups cells in blocks of ten, with spacing calculated from the viewport width.

GGerardoFurtado

78% match

Loading thumbnail…

SVG Lots of Transitions

This example shows a grid of 19,200 small SVG rectangles that simultaneously reverse their positions and change color from steelblue to lightgreen over three seconds. The animation creates a sweeping wave effect as each rectangle’s transition delay is based on its original row and column index. The code uses D3 v4 with `selection.transition()`, `duration()`, and `delay()` to orchestrate the movement, while the SVG attributes `x`, `y`, `width`, and `height` define the grid layout. The data is generated with `d3.range()` and positioned using modular arithmetic.

Aandrew-reid

77% match

Loading thumbnail…

Square Grid

A square grid visualization displays quantities from zero to 9,999 as a hundred-by-hundred matrix of small squares, grouped into rows and blocks to represent powers of ten. The animation randomly resets the target count, then uses `d3.select` and `d3.range` to update the `rect` elements via `.transition()` with staggered delays, while a text label interpolates its number using `d3.interpolateNumber` and a custom tween. The rendering uses SVG within a 960×990 canvas, with cell and group spacing computed from the available width.

GGerardoFurtado

77% match

Loading thumbnail…

transitions

Five blue squares animate their width and height from zero to the values in the rectData array (100, 200, 300, 400, 500), growing at a 0.3 opacity on a 960-by-500 SVG canvas. Using D3 v5 and the select API, the visualization attaches a transition to the enter selection of each rectangle, applying a 5-second duration with a 250-millisecond delay to both dimension changes simultaneously.

NNita

76% match

Loading thumbnail…

Transform Transitions

A grid of colored squares animates in response to mouse hovers, demonstrating smooth interpolation between different 2D SVG transforms. Each rect transitions from its original translate to a combined translate, scale, and rotate, then shrinks and fades before being removed. The code uses d3.v3 transitions with `.attr("transform")` to leverage matrix decomposition, automatically decomposing transforms into canonical translate, rotate, scale, and skew components. The visualization is built with a data-joined SVG rect per grid cell, filled with HSL colors based on position, and rendered entirely through D3’s selection and transition APIs.

Mmbostock

76% match

Loading thumbnail…

Square Grid

A grid of gray squares fills the view, with each square representing a single unit, arranged so that rows of ten, blocks of one hundred, and groups of one thousand are visually distinct. The count, displayed as a large number, animates upward or downward as the grid randomly updates to a new total between zero and ten thousand, using transitions to add or remove squares. The visualization uses D3 v4 with data joins and tweens to interpolate the numeric label, while the grid’s layout is computed via `d3.range` and positional math. This example is forked from Mike Bostock’s original block.

GGerardoFurtado

76% match

Loading thumbnail…

Text Transition I

A large numeral repeatedly and randomly transitions to a new value through an animated interpolation of its text content. The page uses d3.select on an h1 element and d3.transition.tween to create a custom text tween, interpolating between the current numeric value and a randomly generated number up to one million. The transition runs continuously via a recursive start event, with each new value appearing after a delay. Numbers are formatted with d3.format using commas.

Mmbostock

75% match