Animated dataset transition

How to smoothly transition from a dataset to the other. Use the react-spring library. Several examples with explanation. Start simple. Then focus on tricky things like enter, exit, axis, path.

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

Most basic

Consider a change where dataset has the same structure, just the values change. Same number of items.

Also, just animating a prop of a shape

Very simple, just animate the bar width

Spring looks like this

const springProps = useSpring({
  to: {
    barWidth,
  }
});

Now, we have a springProps object that has a barWidth property.

We can pass it to a animated.rect svg element.

<animated.rect
  x={x}
  y={y}
  width={springProps.barWidth}
  height={height}
  fill="#9d174d"
/>

Most basic dataviz animation with react spring. The width of each bar is smoothly updated with an animation.

Scatterplot transition

Axis limits set to 0 to 100. No need to animate axis for now.

Most of the circles just have their x and Y positions that update, no big deal.

Blue and red point exist only in dataset 1 and 2 respectively. We need to make them enter and leave the scene properly.

A very basic animation using react and react-spring.

Animating a path

Donut is more tricky since each shape is a path. As a result, we need to compute the d property for each frame of the animation.

This is possible thanks to the to() function

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