React-spring for data visualization

This post is dedicated to react-spring, a javascript library for spring animations. It quickly explains what it is and how it works, and then explains how it can be used in the field of data visualization.

A minimal react-spring dataviz example. A viz component expect a position and a color prop. But it smoothly animates the transition.

What is spring animation

Spring animations are different than typical CSS easing animation. They're built on spring physics, which gives a more fluid and organic feel. The best way to be introduced to this concept is to read Josh Comeau's friendly Introduction to Spring Physics

To quote him directly:

Spring physics are like a secret ingredient; they make all animations taste better

Basic react spring animation

The best tool to build a spring animation in the react world is react-spring, a library dedicated to it. If you're not familiar with it already you probably want to take a look at their home page.

Let's start with a basic example showing how to animate a very basic viz component that just renders a circle.

A very basic animation using react and react-spring.

The useSpring funtion can take 2 types of input: an object or a function

if object, it returns an object that has the values of our animation
if function, it returns an array of length 2. First item is the object mentionned above. item 2 is the api that controls the spring. api is used for imperative style

Animating axes

A common hassle is to animate axes, since it's a lot of svg elements.

A very basic animation using react and react-spring.

General Knowledge

All charts

Animation

Interactivity

Caveats

Contact

👋 Hey, I'm Yan and I'm currently working on this project!

Feedback is welcome ❤️. You can fill an issue on Github, drop me a message on Twitter, or even send me an email pasting yan.holtz.data with gmail.com. You can also subscribe to the newsletter to know when I publish more content!

Contact

About | License