🌍 Public
Viewing a saved revision (read-only)
2f4eb76b5fe74964ad446ea4be3b2bf8
Racing Bar Chart Animation Test
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 descriptionFollowing along with Muri's Bar Chart tutorials.
This covers:
- Attempting a racing bar chart
- Understanding custom react hook UseInterval
- useInterval Github