Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of [07] Gauge Chart - Using React Hooks with D3

Public visualization

Fork of [07] Gauge Chart - Using React Hooks with D3

0 stars0🌍 Public
AAleex94
Last edited Dec 2, 2021
Created on Dec 2, 2021

This example demonstrates a gauge chart built with React Hooks and D3 v5, where users can resize a video element and a draggable container while buttons adjust, filter, or append data values. The gauge renders as an animated SVG arc using `d3.arc` and `d3.pie`, transitioning between states via `transition.attrTween` with `d3.interpolate`. A separate bar chart uses D3 scales and axes with a `ResizeObserver` custom hook to handle dynamic container dimensions. Data updates trigger React state changes, which re-render both visualizations.

AI-generated description

2020-w08-6

Tutorial series:

The Muratorium: Using React (Hooks) with D3

  • [07] Gauge Chart

Comments

Sign in to join the discussion.

MIT Licensed