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
Jjimmy.fisher@member.mensa.org
Last edited Nov 28, 2024
Created on Nov 28, 2024

A racing bar chart animation continuously updates six categorical values—alpha through foxtrot—as each bar increments by ten meters at random intervals. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear` to position bars and labels, while transitions animate height and width changes over 750 milliseconds. A custom `useInterval` hook triggers data mutations, and a ResizeObserver monitors container dimensions. Bars are rendered as SVG rectangles, with text labels displaying current values.

AI-generated description

Following along with Muri's Bar Chart tutorials.

This covers:

Comments

Sign in to join the discussion.

MIT Licensed