Skip to main content
SimilarExport ZIP
100%

Count Up Animation

✓ Published0🌍 Public
LLyndoman
Last edited Apr 4, 2017
Created on Apr 20, 2018

This example demonstrates a count-up animation that transitions displayed numbers from an initial value to a target value. The code uses jQuery’s `.animate()` method on a plain JavaScript object, with a step function that updates the text content of each element styled with the `.counter` class. The target value is read from the element’s `data-count` attribute, and the animation runs over an eight-second duration with linear easing. The count-up effect concludes by setting the final number exactly, using the complete callback.

AI-generated description

Similar vizzes

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
63% 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
62% match
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
61% match
Loading thumbnail…

JS Bin

This example demonstrates a live counter that updates every second, displaying the number of elapsed seconds in the browser and the console. It uses RxJS’s `Observable.timer` to emit sequential integers, which are mapped to formatted strings. The resulting data stream is subscribed to by two effects: a DOM effect that writes the text into a `#app` container, and a console effect that logs each message. The code separates the main data stream from its side effects, following a simple functional reactive programming pattern.

JJaxonDvl
60% match
Loading thumbnail…

Simple Unidirectional Data Flow

This example demonstrates a simple unidirectional data flow pattern, using a counter that increments on button click. The current count is displayed in the DOM, and each click dispatches an INCREMENT action to a reducer function, which returns a new state object. The updated state is then passed to a render function that updates the text content of the counter element. The code uses vanilla JavaScript, with plain DOM methods like `getElementById` and `addEventListener` to handle interaction and rendering.

MMark D. Clements
60% match
Loading thumbnail…

On click increment[count and setcount]

This example demonstrates a simple counter interface with a button and a display. Clicking the button increments a numeric count value shown in a large paragraph element, with the current total displayed in the text "click the button {count}". The implementation uses React's `useState` hook to manage the count state and `setcount` to update it, while the `onClick` event handler triggers the increment function. The interface is rendered via ReactDOM's `render` method into a root div, with styling applied through embedded CSS that enlarges the text and button for visual emphasis.

NNita
60% match
Loading thumbnail…

People Counting App

This example shows a manual passenger-counting interface with a large numeric display, an INCREMENT button, and a SAVE button. The app tracks how many people have entered and logs previous entries in a running text string. Using plain JavaScript functions (`increment()` and `save()`), it updates the displayed count via `textContent` and resets the counter after each save. The visual design relies on CSS background styling with `background-image` and `background-size`, while the interface itself is built from static HTML buttons and headings without any external charting or data libraries.

GGayan Priyadarshana
59% match
Loading thumbnail…

Counter

A counter app shows a large numeric count that increases or decreases via two buttons, styled with large typography and a simple layout. It demonstrates the d3-component library for defining reusable components like `countDisplay`, `buttonPanel`, and `button`, while managing state with Redux. The top-level `app` component composes these pieces, and renders update on store subscriptions. The example bridges D3 v4's component pattern with Redux's reducer and dispatch flow.

CCurran Kelleher
59% match