Dealing with path
Thanks to the previous lessons we have a pretty solid understanding of react-spring, allowing to animate all the shapes on a graph, leading to a pretty nice bubble chart smooth transition.
There is one piece missing in the puzzle though. How are we going to deal with path, to build transitions on charts like the line chart or the streamgraph?
The problem
Until now we've aanimated the transition of many features: position, size, color, text...
This is kind of straightforward! If I tell you to animate a position from 0 to 100, you understand that you just need to infer positions (numbers) between those 2 values.
Now, if the first path is M0,100 L 100,200 and that the next path is M100,150 L200, 300, it is not so obvious how to go from 1 to the other!
The good news
react spring KNOWS how to transition between paths that have the same number of points.
Click on the buttons to trigger a smooth transition between the 2 line charts.
The bad news
react spring does NOT know how to transition between 2 paths that are highly different = not the same number of points. In this case, we need to use custom interpolation and the best tool for that is flubber.
Try d3.js various options to offset the data and smooth shapes. See a smooth transition between options.
Even fursther, show the boxplot - violin plot transition
Transition from a pie chart to a barplot with a smooth animation using the buttons on top.