Skip to main content
SimilarExport ZIP
100%

Departures board

✓ Published0🌍 Public
FFrissAnalytics
Last edited Sep 25, 2018
Created on Sep 25, 2018

A D3.js split-flap departure board cycles through city names on a black background, with each letter animating through an infinite CSS rotation via `animationiteration` events. The board advances through a shuffled list of cities, updating three rows of flaps per cycle using `d3.select` and `d3.queue`. Text and styling come from a Google Fonts "Roboto Condensed" typeface, while the flip effect relies on `@keyframes` `flipFront` and `flipBack` transforms, with timing accelerated by a "fast" class.

AI-generated description

Simulating a split-flap display with CSS animations, advancing the letters on each animationiteration event.

Slow-motion version

forked from <a href='http://bl.ocks.org/veltman/'>veltman</a>'s block: <a href='http://bl.ocks.org/veltman/f2b2a06d4ffa62f4d39d5ebac5ceeef0'>Departures board</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Departures board

This visualization simulates a split-flap departure board, displaying three rotating rows of city names with a yellow-on-black aesthetic. Each letter flips sequentially through the alphabet until it reaches its target, mimicking the mechanical clatter of a real airport display. The code uses D3 v4’s selection, data binding, queue, and timer APIs to manage letter transitions, while CSS 3D transforms and keyframe animations create the flip effect. An `animationiteration` event triggers the next letter change, and a shuffle process cycles through a hardcoded list of city names.

FFrissAnalytics
92% match
Loading thumbnail…

Flight widget

A flight departure board displays scheduled flights with time, destination, flight number, gate, and remarks, updating every five seconds. The animation flips each character individually using a CSS keyframe rotation. The app uses vanilla JavaScript with `setInterval` and `setTimeout` to shuffle flight data, generating random letters and numbers for new entries. Rows are populated dynamically via `createElement` and appended to the table body, while the split-flap effect is achieved purely with CSS transforms.

AAlex-0277911
72% match
Loading thumbnail…

Gist 7330771

This example demonstrates how D3 transitions make data joins easier to follow by animating the entry, update, and exit states of SVG text elements. It shows a sequence of randomly selected alphabet letters that change every 1.5 seconds, with entering letters sliding down from above, exiting letters dropping below, and updated letters gliding horizontally to their new positions. The code uses D3’s selection joins with key functions, `transition.attr` and `transition.style` to animate positions and opacity, and relies on SVG text elements rendered in a single group. The data is a shuffled subset of the alphabet, sorted and re-joined with each interval.

11wheel
68% match
Loading thumbnail…

10.transition-update pattern

The visualization demonstrates the D3 update pattern by animating a changing subset of the alphabet as text elements enter, update, and exit. The code defines separate transition states for each lifecycle phase—green for entering, dark gray for updating, and brown for exiting—using the `d3.transition` API with a 750-millisecond duration. Elements move horizontally to their new indexed positions, while exiting items fade out and shift downward before removal. The data shuffles and slices randomly every second via `d3.interval`, with the SVG output repositioning based on the current array.

深深度碎片
67% match
Loading thumbnail…

Animated Letters

This animated visualization demonstrates D3’s selection join pattern by showing random letters entering, updating, and exiting a view. Green letters appear from the top, black letters shift horizontally to their new positions, and brown letters drift downward before disappearing. The example uses `d3.select`, `selectAll`, `join`, and `transition` with a 750-millisecond duration, driven by `setInterval` updates every second. It also includes a custom `randomLetters` function that shuffles and sorts the alphabet, highlighting how transitions handle dynamic data with hot-reload-friendly interval management.

CCurran Kelleher
66% match
Loading thumbnail…

stars

This example creates an animated typography intro where text lines ("Javascript", "meets", "deep learning", "with", "TensorFlow.js") are revealed sequentially. Each line is rendered as an `<h1>` element, while the final line is split into individually colored spans. The animation uses an SVG `<textPath>` to define a path for each header, and a starfield particle system (rendered on canvas with blur and contrast filters) bursts along these paths as the text fades in. The text transitions are staggered, with each line's star trail animating along its path in sequence, and the final line triggers a longer particle effect. The design uses the Google Font "Indie Flower" and a dark background, with each letter of the last line assigned a different color.

EEE2dev
65% match
Loading thumbnail…

ascii-animation

Two separate animations play side by side: a pre-rendered sequence of block characters cycles through slides showing the growth of urban versus rural population, while a second panel flips the characters of a Donald Trump ASCII portrait line by line to create a mirror effect. The population sequence loads its frames from a text file and swaps them every 500 milliseconds using `setInterval`, updating the text of a `pre` element with `d3.select`. The portrait animation reverses each line’s characters and swaps slash directions every 100 milliseconds, using D3’s `xhr` calls to fetch both text files.

11wheel
65% match
Loading thumbnail…

Letras animadas

This example demonstrates D3’s selection.join pattern with animated transitions for entering, updating, and exiting letters. It generates a shuffled, sorted subset of the alphabet every second, rendering each letter as a text element colored green when entering, black when updating, and brown when exiting. The code uses `d3.select`, `d3.transition`, and `d3.shuffle` to animate vertical and horizontal movement, with a `setInterval` loop and a cleanup function that works with hot reloading.

Ffcordon@pin.upv.es
65% match