Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Racing Bar Chart Animation Test

Public visualization

Racing Bar Chart Animation Test

0 stars0🌍 Public
Rre-q
Last edited Apr 21, 2020
Created on Apr 20, 2020

This interactive racing bar chart animates six labeled bars whose values increment randomly over time, displaying the data as a dynamic ranking. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for axes, joins data with keyed selections, and transitions bar and label positions with `rect` and `text` elements. A custom `useInterval` hook drives the animation, triggered by a Start/Stop button, while a ResizeObserver adapts the SVG canvas to its container.

AI-generated description

Following along with Muri's Bar Chart tutorials.

This covers:

Comments

Sign in to join the discussion.

MIT Licensed