Transitions

[00:00:00]
>> Shirley Wu: Okay, so the second thing that D3 helps us do, but needs access to the DOM, is transitions. And so this is a slightly janky GIF of the animation. If you look at it in actuality it's quite smooth, just please take my word for that. And the reason why D3 needs direct access to the DOM and the way that it was designed is that to do the transistions, what D3 does it you tell D3 the attributes that you want to animate.

[00:00:43]
So in this case, I'm animating for the bars, for example, I'm animating the Y position and the height of each of these bars. And so to do that, D3 is like okay, give me the starting attributes, the starting y end height, and the ending y end height. And I'm going to calculate all of the steps in between to basically get from the starting to the end.

[00:01:10]
It just figures out and then, after it figures out all of the in between points, it just goes and updates the DOM attributes directly. So it will be like, okay, going from y zero, y is one, let me figure out all of the in between. And then directly update the attribute Y to all of those in between points so that it can do the animation.

[00:01:40]
And the reason why I've asked around a little bit about React animation libraries and the way that in general React recommends that you do for animations is that it asks you at every single one of those in between points, set state on the component. But if you can imagine, let's say this animation is happening at 60 frames per second.

[00:02:11]
That's If I remember correctly, 16 milliseconds. It's updating the DOM every 16 milliseconds. If you can imagine having to set state on your React component every 16 milliseconds, like that might be fine if you have just one or two elements that you want to do this on. Let's say you just have like a button you're trying to animate or something.

[00:02:35]
But, if you have a data visualization that has this is only 300 elements but let's say you have 1,000 elements or something and you're trying to animate the attribute. Like you're trying to set state on the react component for 300 something elements every 16 milliseconds, your browser is not going to be very happy at all.

[00:02:59]
And your user's browser is not going to be happy at all either. And so that's why I tend to use D3 for transitions or GreenSock for animations. And this is where I kind of show you how to do it and tell you it's not the most recommended, but it's how to do it.

[00:03:27]
And this is probably the place where React and D3 don't play nicely the most. This is the ugliest part. But how to do transitions, you want select the elements that you want to animate. You want to bind that data. You want to call D3 transition on it. And then you want to give it the attributes to animate.

[00:03:53]
And then the key thing to note here is that in the render function, previously we were citing the y, the height, and the fill in the render function. Now, we're not, because D3 is now handling those attributes. So makes sure that React doesn't manage the attributes that D3 is transitioning.

[00:04:21]
So these three are no longer in the render function. And that's the reason why there's this big asterisk, because it works, it's performant, but the code is really ugly. And especially if you work in a large team and this doesn't get communicated clearly, then that's potentially how you can get bugs to start happening.

[00:04:46]
If somebody is like, why are the y and the height missing from here? And they put it in here, or something. That's where it could potentially be pretty bad. So, I don't highly recommend it. But it's unfortunately, I don't have a better solution for you. The only other solution I have is usually what happens when I need transitions is I'll actually not use React to render at all.

[00:05:20]
I'll just get myself a group element and instead of using these React renders, I'll go into D3 and I'll use enter update exit to manage the whole thing. And so all React sees is this empty group element. And then within there, I'll be animating the bars myself. So there's no React manage is a part of it, and D3 manages a part of it.

[00:05:46]
It's D3 is managing absolutely everything. So that's what I would recommend if you do have to do a lot of animations. Yeah, so I haven't found a good way around it, and I don't think my friends have found a good way around it either. So this is a use if you must, but proceed with extreme caution.