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
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
👋 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!