Skip to content
loading...

Creating a Zoomable Line Chart – Using React (Hooks) with D3

github logo ・1 min read  

Using React (Hooks) with D3 (17 Part Series)

1) The Basics – Using React (Hooks) with D3 2) Creating a Curved Line Chart – Using React (Hooks) with D3 3 ... 15 3) Axes and Scales – Using React (Hooks) with D3 4) Creating an Animated Bar Chart – Using React (Hooks) with D3 5) Interactive Charts – Using React (Hooks) with D3 6) Responsive Chart Components with ResizeObserver – Using React (Hooks) with D3 7) Creating a Gauge Chart with Machine Learning (ML5, Teachable Machine) – Using React (Hooks) with D3 8) Visualizing the Breaking Bad Timeline – Using React (Hooks) with D3 9) Creating a Racing Bar Chart – Using React (Hooks) with D3 10) Creating an Animated Tree Chart with React and D3 11) Creating a Physics-Based Force Layout with D3 / React 12) Interactive World Map with D3-geo 13) The Basics of Using React Hooks with D3 (Remastered for 2020) 14) 🥑🍌🍆 Creating a Stacked Bar Chart – Using React (Hooks) with D3 15) 🥑🍌🍆 Creating a Stacked Area Chart – Using React (Hooks) with D3 16) Creating a Zoomable Line Chart – Using React (Hooks) with D3 17) 5 Things You Should Know About Using React (Hooks) with D3

Code on GitHub:
https://github.com/muratkemaldar/using-react-hooks-with-d3/tree/16-zoomable-line-chart

Hi, this is part of the "Using React (Hooks) with D3" video tutorial series, and in this one, we add a zoom functionality to line charts using D3.

Enjoy!

twitter logo DISCUSS
Classic DEV Post from Oct 11 '19

What was your win this week?

Got to all your meetings on time? Started a new project? Fixed a tricky bug?

Murat Kemaldar profile image
UI Engineer / Frontend Dev with a design background.

Sore eyes?

dev.to now has dark mode.

Go to the "misc" section of your settings and select night theme ❤️