Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Animated Letters

Public visualization

Viewing a saved revision (read-only)

bf08efaf95104dbd923b2bd684a156c6

Animated Letters

0 stars1🌍 Public
CCurran Kelleher
Last edited Aug 19, 2024
Created on Aug 12, 2024

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 description

Click on a circle to see it highlight and blink!

This example is about dealing with timers, such as the one related to the blinking of the circle. It shows how you can return a "cleanup function" from main, which will be invoked whenever the app is hot reloaded. This is similar to the cleanup function returned from the useEffect callback in React.

For examples of this in various frameworks, see d3-rosetta