Application on a scatterplot
In the previous lesson, we explored animating SVG and HTML elements with react-spring.
Now, let's apply that knowledge to a real-world graph by animating the transition between two datasets on a scatterplot.
Most basic example
Smooth dataset transition
How can we smoothly animate the transition between 2 datasets on a bubble chart? The chart used in this blog post can be drawn for several different years. You can use the select button on top to select the year, and the bubbles will animate to their new position.
This is possible thanks to the react spring library. Basically, instead of rendering usual circle elements, the library provides an animated.circle element, that is linked to a useSpringhook.
This is what the Circle component I use looks like:
import { useSpring, animated } from "@react-spring/web";
type CircleProps = {
color: string;
r: number;
cx: number;
cy: number;
};
export const Circle = (props: CircleProps) => {
const { cx, cy, r, color } = props;
const springProps = useSpring({
to: { cx, cy, r },
config: {
friction: 30,
},
delay: 0,
});
return (
<animated.circle
cx={springProps.cx}
cy={springProps.cy}
r={springProps.r}
opacity={0.7}
stroke={color}
fill={color}
fillOpacity={0.3}
strokeWidth={1}
/>
);
};A bubble chart component that smoothly animates changes between datasets.
Exercices
A histogram that smoothly transition from 1 dataset to another
Most basic barplot built with d3.js for scales, and react for rendering
A lollipop chart with smooth transition between dataset.
A bubble chart component that smoothly animates changes between datasets.
Ok but there is a problem now: how do we deal with the data points that enter the dataset, or the one that exit?
That's the plan for the next lesson.