Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Racing Bar Chart Animation Test

Public visualization

Viewing a saved revision (read-only)

24036499d07d49d6a66719f398b7d2be

Racing Bar Chart Animation Test

0 stars0🌍 Public
AArriannePandaraoan
Last edited May 6, 2020
Created on May 6, 2020

Six labeled bars race in ascending order, with values expressed in meters, as randomized increments of ten repeatedly re-sort the ranking. The React component uses D3 v5’s `scaleBand`, `scaleLinear`, and `selectAll().data().join().transition()` to animate rectangle widths and text labels over 750 milliseconds per step. A custom `useInterval` hook drives updates every 750 milliseconds, triggered by a Start/Stop button, with iteration count displayed. Bars and labels transition smoothly while maintaining SVG rendering.

AI-generated description

Following along with Muri's Bar Chart tutorials.

This covers: