🌍 Public
D3 sliders
This example shows an interactive bar chart of a small dataset where dragging a vertical HTML range slider recolors bars below a threshold value from light blue to dark blue. The chart uses D3 version 7 scales (`scaleBand` and `scaleLinear`) to position and size SVG rectangles, and React is mentioned as the framework context. The slider’s `change` event triggers a D3 transition over 500 milliseconds to animate the fill color change, demonstrating linked interaction between an HTML input and D3-managed SVG elements.
AI-generated descriptionA bare minimum HTML page demonstrating use of CSS and JavaScript.
See also React Starter.
MIT Licensed




![[04] Animated bar chart - Using React Hooks with D3](/viz/e03ed9b0d9ff4d57b0a26da9df22705b/social-image.png?v=c7a1d1871a7a40d4993dd1f2342cbfdf)



Comments
Sign in to join the discussion.