Departures board

100%

Departures board

✓ Published0🌍 Public

Last edited Sep 25, 2018

Created on Sep 25, 2018

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.

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>

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

mit Licensed

Similar vizzes

Loading thumbnail…

Departures board

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.

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

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

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

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

67% 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…

Fork of Assignment 5: bubble plot with D3

This interactive bubble plot shows the relationship between departure delays and late aircraft delays across U.S. airports and months, with bubble size encoding carrier delays and color mapping to the month of the year. The D3.js v7 visualization includes dropdown filters for month and airport, hover tooltips with detailed statistics, and animated transitions that update the SVG elements when filters change. Data loads from a CSV file with d3.csv, while d3-legend and d3-annotation libraries add legends and contextual callouts for key data points.

NNita

66% match

Loading thumbnail…

Fork of Fork of Fork of Fork of Assignment 5: bubble plot with D3

This interactive dashboard visualizes airline delay patterns through four coordinated D3.js v7 charts: small multiples comparing late aircraft versus national aviation system delays across months, a time series of delay types, a stacked bar chart showing delay proportions by carrier, and a bar chart of average delay minutes. It includes year and carrier filters that update all views simultaneously, alongside tooltips and interactive legends. The visualization uses D3 scales, axes, stacking, and line generators with animated transitions on CSV data loaded from GitHub.

NNita

66% match