Battle-Tested Techniques for Animation and Data Viz with React

Hi everyone, I'm Cristó and I've been working as a Creative Coder for about 12 years now. During this time, I've had the opportunity to do a little bit of everything, from web and mobile application development to 3D modeling and VR. I'm also part of the Insights team at Shopify where we create awesome data visualization experiences together.

Today I'll walk you through some of the techniques that I've learned along the way, so that you can create your own performant animations and a data vis with React. If you have any doubts questions or suggestions I'll be available to answer them by the end of the talk, or if you're not watching this live feel free to reach out to me on Twitter my username is Krystal Campioni.

Before we actually start talking about code there's one topic that I always like to cover because I think it's really important. Motion is a message. If you think about it in real life things don't you know just pop in your face because it would be really scary if they did. Instead what happens in real life is that things move from one place to the other, like this furry monster walking in real life from one side of the screen to the other.

The thing about motion though is that when it's wrong it can actually make the experience worse. So let's have a look at this example. Like almost everyone I've been obsessing over COVID-19 data since the beginning of the pandemic and as I live in Canada I always come across this one from a Canadian newspaper. Notice how when we switch from total to breakdown the area representing the total slides down and all the areas representing the layers of the breakdown slide up. This makes it hard for my brain to understand what the relationship between the breakdown and the layers of the layers of the breakdown and the total is. It should be clear that the breakdown is formed by deaths recovered and active but because everything is moving at the same time it seems like both of the data sets are not related at all.

So let's compare this with an alternative. In this example instead of sliding everything down and up again we just keep the total number of cases, the area representing the total number of cases always there, and then we slide up and down just the layers forming the breakdown. It feels that the relationship is a bit clearer but to be honest this is a perfect example of when using fancy animations is not ideal. So let's compare it with a final alternative. Here when switching between total and breakdown we have a simple fade that reveals and hides layers of data. This is great because it makes it obvious that these layers sum up to form the total. My brain does not have to follow some lines moving randomly around to try to understand what's going on it's just there. There are of course situations where motion can't help us understand what's going on so let's have a look at another example. Here we have a chart that compares the numbers of sales from this year with the same period of last year. We can choose which period we'd like to compare this week, this month or this quarter. Notice how when comparing this quarter to last year's quarter the line is red because the total number of sales in this quarter was lower than last year's but when we switch to this week the line becomes green as this week compared to the same week last year had more sales. The animation here helps us understand that the data lives in the timeline. When we choose a period to analyze we zoom into that period in a timeline. Another interesting example this chart shows the number of page views in the last 10 minutes. So we have 10 bars, one bar for each of the minutes and the bar for now keeps growing as it receives new data when that when that that last minute is completed a new bar appears and pushes everything to the side to make way for itself once again the motion here is like reinforcing what's happening with the data set.

All right so let's start talking about how we can create some custom data visualization from scratch. Recently we were exploring how to represent the customer behavior data of people accessing Shopify stores. So this was our initial draft the idea here is that we would have all of these moving particle buckets for people that were with active cards or checking out or that already purchased something in the last 10 minutes. It would be super cool if we could see all of these particles swimming in there and jumping from one Petri dish to the next one as people progressed through the sales funnel. The problem was that we could not actually track what each individual was doing. Instead the data that we could get for component looked something like this. As you can see we only have a number for each of the buckets. No way of knowing which one of the little microbes jumped from one Petri dish to the next one. So maybe we could implement an animation of the microbe jumping from a random direction into a bucket when the number increases.

It seems like a good idea, but it's this could get really, really messy if we had like hundreds or thousands of people accessing the site at the same time. I mean, this looks kind of cool, three evil blobs floating around, but it doesn't actually help me understand how many people are at each step or how the flow is going. So this was not going to work.

So this is our second draft. And I think that this one is actually much better. We have three circles with different sizes that are easy to compare, so we can quickly know if we have more visitors with active cards or people that already purchased something, for example. And we can make it work with our data as well. So let's say that the first time we receive the data, total checkouts is 15. The next time we receive it, total checkouts is 17. We know for sure that the number incremented by two, so we can trigger an animation of two running dots going from the active cards bucket to the checking out bucket. We can do the same thing if the number of purchases increases.

So let's see how we could use SVG and D3 to implement that chart with react. So the first thing that we should know is how we can implement it with D3, because that's the library that we're going to use for all of the math calculations. And we have all seen fantastic examples of things that can be built with D3. It is super cool, but it can be a bit overwhelming to know where to start. I mean, this is a screenshot from D3's API reference from their GitHub docs. Look at the size of this thing. D3 is a really complete tool. It has all sorts of methods that you can use to treat data, bind it to the DOM, etc. But since we're using React to do all the DOM manipulation for us, let's define first what we should not use from D3.

Things like D3 selections. This module works in a similar way that you would expect from something like jQuery, by selecting DOM nodes directly and then transforming them based on the dataset. We do not want to use this module as we'll be letting React do what it does best, take care of the DOM in a performant way, and instead we'll use D3 for what it does best, for being a toolbox, for helping us with math utility functions and layout calculations. No D3 selections. A perfect example of the type of things that we are going to use is D3 scales. Scales are functions that map from an input domain to an output range. If we look at this example in code, it would be something like this. We have an input array with some sample data. We can then use a D3 function to extract the minimum and maximum values of that array, in this case 0 and 500. And we can then use a scale linear function to map those values into pixels so that we can render them in the available screen space that we have.

D3 scale functions actually return a new function that we can call to convert values from the input array into whatever it is that we're trying to use. So in this case, we're trying to convert it to pixels to represent the horizontal distance from the left side of the screen until the position of each of those circles. So in this specific case, we can call the x scale function, which is the function that we get from calling the D3 scale linear. And the first time that we call it, we pass in zero and then retrieve zero pixels. And then we pass in 250, which is the value from the input array, and retrieve 170 pixels. And then we pass in lastly 500 and retrieve 330 pixels. Once again, we are just converting the raw values that we have from the inputs array into the available screen space that we have. And we're using those pixel measurements to define the CX position of each one of the circles.

So going back to the Customer Behavior Chart, now that we know how scales work, we can explore how to change the size of the circles using a D3 scale. The first example that we saw was a scale, a linear scale. But using linear scales for calculating the radius of a circle is not the best. Because we humans, we tend to interpret the area to actually be the reflection of the data. So instead of using a linear scale, we should use scale square root. So that the area of each circle is what actually reflects the value that it represents. We can then use the radius scale to calculate the radius of each circle, depending on the data. This is nice. But we are not animating the radius changes yet, so it doesn't look super smooth. Let's fix that by plugging in react-spring.

To do that, we first import use-spring-animated-config from the package. Then we set up an animation with the use-springs hook. It works kind of like this. The first argument is the number of springs, or animations that we want to create. The second argument is a list of objects describing each animation. It is here where we tell react-spring what properties it should watch for changes in order to animate. In this case, it's the radius property where we're using the radius scale to get the value based on the data points. The config is where we define the characteristics of the animation using spring physics. Things like mass, tension, friction, etc. Config.mulassist is just one of the defaults that we get from the package. If you'd like to learn more about how spring physics work, I highly recommend you read this article by Josh Kamoul called A Friendly Introduction To Spring Physics, which you can find on this link, bit.ly springphysics. Spring-physics.

Once we have the radius springs prepared, we just have to render it. So, for that, we replace the regular circle tag with an animated dot circle tag. And instead of calculating the radius directly, we get the radius from the radius spring. Finally, we can implement the running dots animation every time that we fetch new data.

Similarly to what we did for the radius, we will implement these animations using a use springs hook. To define the number of dots that should be rendered on the screen, we have to keep track of the data changes. And for that, we can use a custom use previous hook. Once we have a way of keeping track of the previous value, we can observe the changes in our data using a use effect that has data as a dependency. Inside that hook, we check if the count has increased before doing anything else. We then calculate the increment size by comparing the current count with the previous count. The increment will be used to define how many running dots we should render on the screen.

The animation happens quite fast though, so we can't really tell the difference once the number gets too big. It's easy to count when there's one or two or five running dots, but when it's a big increment like 100 or 200, we can't actually count them. We can take advantage of that for a quick performance gain. So since we can't tell the difference, we can clamp the increment to never be more than the maximum circles per bucket. This means that we'll never have more running dots or circle tags in the DOM than what's allowed by the maximum circles per bucket. Then we create an array of objects that we will use in this springs animation. By using the array method and passing the increment size, we can create an array of the length of our increment and fill it with an object that describes the animation.

There's a lot happening in there. So let's have a look at what's happening more closely. If you create an array by using the array method and passing it a number, it will create an array that is empty and has a length that you provided. You can then use the fill method to fill it with many sorts of things. For example, you can fill it with Nulls, you can fill it with strings, or in this specific case, we can fill it with objects, which are objects that are describing each one of our animations. So, each object in the array will be the same. A From cx, where we will store the initial position of the running dots when the animation starts playing. In this case, it will start inside of the checking out bucket. Then a To cx, where we store the final position of the running dots in the animation. In this case, the animation will finish when the dot is inside of the purchased bucket. Lastly, we have a radius for each dot. But remember that we talked about not being able to notice the difference when there's a lot of dots or not.

So, we need another way to signal when it's a big increment or when it's a small increment. And for that, we can use that gets running dot radius function that does just that. It checks if it's a big increment, then we should use a big radius. If it's a small increment, we should use a small radius.

Finally, now that we have all of the objects describing each of the animations, we can actually implement it by using the use springs hook. It's similar to what we did before. But there are a couple of differences. The first thing to notice is that we are applying a delay to each of the dots based on its index. If we didn't do that, all of the dots would run at exactly the same time and would be on top of each other. So we would never see any dots. Because they would run at the same time on top of each other. So we would ever only see one dot running. By applying this delay, we create a trail effect as if one dot was following the previous one.

Then instead of animating a value every time that it changes, we are defining where the animation should start and end with a from and to object. Each of the properties inside of the from and to objects will be animated. Here's how it looks in the end. We have all of the radius changing depending on how many people we have in each step of the funnel. And then we have small increments for a small radius for small increments. If we have a big increment, then we have a big running dots, big running dots going from one circle to the next one.

So let's quickly talk about how we could re-implement the same chart with canvas because if you have lots of things rendering on the screen, you will notice that using SVG starts to not be ideal because the animation performance will drop quite a lot. Just for the sake of simplicity, because we looked at this example, let's re-implement it by using canvas. But think that you should use canvas only when you hit a performance gap and SVGs are not enough. So SVGs use what we call a retained mode API, which means that we always have a reference to each of the tags inside of the SVG in the DOM. Canvases instead use what we call an immediate mode API. This means that there's no way of keeping track of what objects are currently on the screen, like we did with SVGs. Instead, it works as if you had a little blank canvas and a paintbrush. You can give commands to the paint brush so it draws on the canvas. But once it's there, it's there and you cannot move things around. So you might be thinking, how on earth are we going to animate things then? To answer that, I'll ask you to think of one of those paper flip books. I used to love creating those when I was a child.

And animating in HTML canvas is pretty much the same process. Since you can't actually move things, you just have to redraw each object in its new position at every frame. So going back to the customer behavior chart, if we were to reimplement it with Canvas, we wouldn't use animated.circle anymore. Instead we would clear the whole canvas and redraw each circle in its new position at every frame.

So let's have a look at a simple example. Suppose we wanted to have a circle moving right and left on the screen. We could once again have a use spring hook that updates the X position and we could then have an animated element like an animated.zip, for example, if we wanted to actually render that value on the screen. But the animated that we import from the library can also be used to create custom animated components. So in this case, we could have a canvas component that receives X as a value as a prop and then redraws the canvas every time that the X value changes.

So the first lines here, we have a ref that we can use to access the canvas element and then we can get the 2D context of the canvas by accessing canvas ref. The context is what contains all of the methods for drawing on the canvas. So we save it to a CTX constant instead so that we can refer it as many times as we need. So after that, we have a use effect hook that keeps track of changes on the X value. And inside of that use effect hook, draw method that clears the whole canvas with a clear rect method that accepts X and Y origin point and a width and height. And then actually begins the path. Well, to begin the path, pretty similar to what we do with SVG paths. And then the Arc method actually creates the little circle. We fill it with reds and that's it.

So finally, we export the canvas as an animated.canvas as an animated canvas by using the animated method we imported from React Spring. Once we have the animated canvas, we just need to import it to the parent component that has the useSpring and pass down the X value the same way we would do for an animated.Ziff. So we could do the same thing in the CustomerBehavior component by passing the radiusSprings and the orderRunningDots that we already created to an animated CustomerBehavior canvas. The canvas API is pretty verbose, though, so let's make our lives easier by introducing a couple of utility functions that we use often, a drawCircle method, a drawRect method and a clearCanvas method. With these utilities in place, we can go ahead and include a useEffect that gets called every time that bucketRadius or the orderRunningDots changes. The order that these methods get called also matters. We first want to clear the whole canvas, then draw each animated element in its new position, and finally draw the static elements on top of everything, because in this particular chart, the static elements are always on top of the animated elements, visually speaking. What the drawAnimatedElements does is map through each radius value in the bucketRadius array that we got as a prop from the useSpring hook, and then use the index to determine the X position of each circle. The Y position for all of them is the same. We then fill it with a gradient and call the drawCircle method that we had looked at before to actually draw it on the canvas. Lastly, we do the same thing for the running dots. Get each.cx FillAndRadius and use the drawCircle method to draw them on the screen.

The only difference here is that we are getting those values directly from the spring object. Lastly, a note on accessibility. Even though animations are super cool and many times they do help us tell a story, it can also be a horrible experience for people who are sensitive to motion and can get dizzy by watching things dance around on the screen. Many operational systems allow users to turn on a reduced motion option to help with this dizziness. In our project, we have a use reduced motion hook that takes advantage of match media to check if the user prefers reduced motion or not and returns a true or false accordingly. This plays really nicely with React Spring as it accepts an immediate prop that basically turns off the animation if we set it to true.