Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of [06] Responsive Chart Components with ResizeObserver - Using React Hooks with D3

Public visualization

Fork of [06] Responsive Chart Components with ResizeObserver - Using React Hooks with D3

0 stars0🌍 Public

A responsive bar chart built with React and D3 v5 updates its axes and bar geometry whenever the container resizes, using a custom `useDimensions` hook with `ResizeObserver`. The chart reads dimensions from the wrapper’s `contentRect`, then redraws with `scaleBand`, `scaleLinear`, `axisBottom`, and `axisRight`, animating bar heights via `transition`. D3’s `join` binds data for mouseenter tooltips and color scales. A draggable resize control adjusts the root width, triggering live updates.

AI-generated description

2020-w08-6

Tutorial serie:

The Muratorium: Using React (Hooks) with D3

  • [06] Responsive Chart Components with ResizeObserver

Comments

Sign in to join the discussion.

MIT Licensed