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)

4840b6d4e1234c4ab04b973f4acb98f8

Racing Bar Chart Animation Test

0 stars3🌍 Public
TTom-S82
Last edited Mar 12, 2020
Created on Mar 9, 2020

A racing bar chart animates six named categories as their values incrementally increase over time, with bars re-sorting by value and labels updating to show current distances. A React component renders SVG bars and text using d3-scale’s `scaleBand` and `scaleLinear`, while a custom `useInterval` hook triggers state updates every 750 milliseconds. The chart redraws with 750-millisecond transitions on the `rect` and `text` elements, and a start/stop button controls the animation loop.

AI-generated description

Following along with Muri's Bar Chart tutorials.

This covers: