Viewing a saved revision (read-only)
17ada036a34c494aaaa8bc0136b2f530
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.
AI-generated descriptionAn adaptation of the classic
Observable: selection.join
example that uses Vanilla JavaScript. Demonstrates how to
use D3 transitions. It also demonstrates one way to use
setInterval in a way that works with hot reloading and
various frameworks. See also
d3-rosetta.