Looking for modern example of how to animate visx data points with react-spring

[ThaddeusChristopher]

It appears most of the examples of how to do this online are out of date, or only apply animation to grids/axes instead of the actual graph data. Can someone in the know update one of the codesandbox demos below with modern versions? I've tried, and also paged through react-spring's list of breaking changes trying to work out what the cause might be, but had no success. I'm also pretty new to React.

Take a look at this old sandbox using react-spring v3 (and no hooks) that shows how a user can click the graph to initiate animation from one set of XY points to another:
https://codesandbox.io/embed/j3x61vjz5v

Now take a look at this more modern approach (not done by me, uses react-spring v9 and hooks) which tries to do the same thing but lacks animation. It can still switch between data points, but when they update it no longer appears able to spring-animate their transitions:
https://codesandbox.io/s/nh4ec

...You can see they were struggling, trying out different possible workarounds with useTransition/useSpring/animated, but none work. I think I may not be the only one seeking a solid example of how to apply the above concept to more current versions of visx + react-spring.

For the time being I'm using XYChart's AnimatedLineSeries, but am curious how one might achieve this correctly without it (mainly because this approach would allow for deeper customization).

[williaster]

Hey @ThaddeusChristopher 👋 thanks for checking out visx!

I ported the @visx/xychart animation logic to a standalone sandbox. It's a little complicated but hopefully understandable. There's a bit of nuance to getting animation to work with a variable number of points (e.g., react-spring can't interpolate between data arrays if they have differing numbers of points)

https://codesandbox.io/s/hopeful-bartik-mwzn0n?file=/Example.tsx

[artidataio]

Thanks for this, I wish we can have smaller code sample on integration between visx and react-spring. Let's say a bar chart that can be transitioned when the data changed or initial render. This code sample helps, but IMO it's kinda hard to isolate as it contains 500 lines of code.

[williaster]

hey @artidata 👋 point taken I agree that example is quite complex. It errs more on handling all possible edge cases as we do inside @visx/xychart.

Here's a greatly simplified bar chart that should give a sense for the minimum amount of work for adding/removing/updating bars.
https://codesandbox.io/s/ecstatic-bartik-zw2ub3?file=/Example.tsx

[ThaddeusChristopher]

Holy cow was that fast! And perfect! Gah you guys are just amazing :-D