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.)

What’s the big deal? Why can’t we make it easier?

What Makes It So Hard: D3 & React Want Exclusive Control of the DOM

When Mike Bostock invented D3 in 2011, web developers were basically surgeons sticking their hands directly into the guts of the DOM every time they wanted to make an update.

D3 was no exception: it transitions elements by letting you write code that finds and mutates DOM elements.

Fast forward to today. We live in a world of declarative web dev. React, Svelt, Vue, Ember, and Angular all share one big idea: you just tell them what you want rendered, and they take care of the DOM surgery needed to keep things up to date.

Oh, and these frameworks each expect exclusive control of the DOM. Sorry, D3, they don’t share.

Is it possible to make them play nicely together, without majorly re-writing our components?

#react #d3js #javascript