Number transformation with data

100%

Number transformation with data

✓ Published0🌍 Public

Last edited Mar 12, 2017

Created on Mar 12, 2017

The visualization animates a large number, starting at zero and counting upward to a hardcoded value of 3252, with commas added for readability. A single headline element repeatedly transitions through this count over five seconds, then pauses for 1.5 seconds before restarting in an infinite loop. The code uses D3 v4’s `transition`, `d3.active`, and `tween` with `d3.interpolateNumber` to smoothly interpolate the numeric text, while `d3.format(",d")` applies the comma grouping. The data source is a fixed constant in the script, and the rendering relies entirely on D3’s DOM manipulation and animation APIs.

AI-generated description

Similar vizzes

Loading thumbnail…

Text Transition I

A large number in a heading transitions continuously between random values up to one million, using a tween to interpolate the numeric value and reformat it with comma separators via `d3.format`. The animation runs in a repeating loop, with each cycle lasting 2.5 seconds followed by a 1.5-second pause. The code uses D3 v4’s `transition.tween` and `d3.interpolateNumber` to smoothly change the text content, unlike `transition.text`, which only sets the value once.

FFrissAnalytics

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

77% match

Loading thumbnail…

Transitioning Numbers

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.

Aandrew-reid

72% match

Loading thumbnail…

Transition each

This visualization animates a scatterplot of a numeric sequence, transitioning each point from a centralized starting position to its final (n, a) coordinate, where the sequence is generated by a recursive GCD-based rule. The animation uses D3 v4’s `transition` with staggered delays, while also randomizing each circle’s radius, opacity, and fill color from a categorical palette. Points are rendered as SVG circles via `d3.selectAll('circle')`, with axes added using `d3.axisBottom` and `d3.axisLeft`. The data is computed in code, referencing the Numberphile and OEIS A133058 sources.

WWill Carter

71% match

Loading thumbnail…

Transitioning a text counter

This example demonstrates a text counter that smoothly transitions from one numeric value to another, appending the unit " Kunden" (German for "customers"). It shows the counter animating from 33 to 8,748.89 over 2.5 seconds using a tween. The code defines a custom German locale with `d3.formatDefaultLocale`, using a comma as the decimal separator and a period for thousands grouping, and applies the format via `localeGerman.format(",.2f")`. The transition uses `d3.select` to bind the initial data, then employs `transition.tween` within an `on("start")` handler, leveraging `d3.interpolateNumber` to compute intermediate values. The rendering targets an `h1` element, updating its text content on each tick of the tween.

EEE2dev

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

71% match

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

70% match

Loading thumbnail…

tuto

This example displays a series of numbers from a small inline array as text elements positioned along the x-axis. The visualization uses D3 v4 to select existing page elements and append SVG text nodes, setting their coordinates and font size based on the data index. The code also includes commented-out attempts at creating bar charts, but only the text rendering is active. The data is hardcoded directly in the script, and the SVG canvas is fixed at 960 by 500 pixels.

AAlexdef74307

69% match