How to Create D3 Animations in React

With a single line of code

Building complex, animating visualizations with just D3.js and vanilla Javascript gets messy fast. The Hook use-d3-transition makes this task easy by letting you use the React modularity you know and love (like in the GIF above!)

TLDR: Want a custom React hook that makes D3.js transitions/animations easy in React? Check out my npm package use-d3-transition.

What We Want: React + D3 Transitions

We just love those D3 oh-so-smooth animations/transitions.

And gosh, we love React’s declarative-ness and composability (especially when building complex data visualizations.)

So, can you have D3 transitions in React?

You Can…but, Currently, It’s a Bit of a Pain

D3/data visualization goddess Shirley Wu does amazing work explaining ways of combining React and D3 (slide summary, video).

But in my opinion, if you don’t have time to majorly refactor (or an appetite for React anti-patterns), existing methods are too cumbersome.

(Even React-only animation solutions require non-trivial refactors.)