Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Racing Bar Chart Animation Test

Public visualization

Fork of Racing Bar Chart Animation Test

0 stars0🌍 Public
Tt_tannenbaum@coloradocollege.edu
Last edited May 10, 2024
Created on May 9, 2024

A racing bar chart animates six ranked entries—alpha through foxtrot—as their values incrementally grow by ten meters per tick. The React component uses a custom `useInterval` hook to trigger state updates every 750 milliseconds, while D3's `scaleBand` and `scaleLinear` position bars and labels. Each transition runs over 750 milliseconds via `transition.attr`, re-sorting the array by value before rendering. The visualization highlights dynamic ranking changes and iterative data updates within an SVG canvas.

AI-generated description

Following along with Muri's Bar Chart tutorials.

This covers:

Comments

Sign in to join the discussion.

MIT Licensed