Transitions

[00:00:00]
>> And so through D3 transitions are how we animate our attributes and styles on our development from one state, a state A to the next state, a state B. And this animation, this transition from state A to state B, is really important for us in data visualization to maintain what we call object constancy so that we can visually keep track of all of the updates that are happening on the screen.

[00:00:31]
All of the updates that are happening between the first data set, our old data set to the new data set. So I actually got an interesting question from a classroom earlier about how if you remember when we were talking about, you know, original data for a bar chart with the five integers, and then we had the new data array with the eight integers, and there was a part where we were talking about how, the two integers in the original data had switched and changed positions in the new data array.

[00:01:23]
The question was whether D3 keeps track of that like switch from the original to this new data array. And the answer the simple answer is that D3 does not keep track of that once we give it. The new data array D3 kind of just like forgets about the previous data arrays and it just concentrates on the new one.

[00:01:46]
It just kind of calculates, you know what the differences are between the old one and the new one. And it just tell us what we need to do to get to that new one and then D3 itself, just kinda work, forgets all about it.
>> But One interesting place that it does and can persist, is with if we decide to put transitions or animations on this update, because once we put in the animations where we're going to see is very clear and the bars In the previous state, the state A, they're going to be shifting around.

[00:02:27]
And you're going to see the animation of them kinda like swapping around when we go from that original data array to the new data array. So from the first kind of state A to state B so you'll see that animation happen. So D3 itself has a whole module dedicated to transitions and it has a lot of support for and how the timing of these animations work and how they ease.

[00:02:56]
So the easing is like how the animation kind of like, guess the best way I can describe it as like how the animation kinda like bounces and or we can potentially chain our animation so we can have bars do one animation, maybe it fades in and then like it can we can chain a.

[00:03:20]
Non of the animation right after and maybe it slides over or something like that. So we can chain animations. And we can even create custom animations with D3. So there's a lot of ways to work with D3 transitions. Although note if you're trying to do anything beyond kind of, transitioning from one state to the next, the chaining of transitions does get a little bit cumbersome in D3 if you're trying to like chain a lot of animations.

[00:03:54]
So if you have a lot of animations that you're trying to do with like, where you want very specific timing control, I would actually recommend using Greenstock. Greensock is an animation platform. And I find that that one pairs quite nicely with SVG, and I use it a lot with D3.

[00:04:13]
And I would recommend that for if you want to do really advanced animation, so use greensock for very advanced animations. But certainly D3 is really great for if you're doing some simple transitions. For our DOM elements to go from one place to the next. And today, we're going to cover just the simplest but still quite powerful way to use these three transitions.

[00:04:38]
And the way that we do it is and we first define our transition. So we call it d3.transition. And I'm just gonna set a duration of one second so duration accepts milliseconds. So, in this case, I'm passing in 1000 milliseconds and then we're gonna store that in this variable t.

[00:05:01]
So that we can if we have multiple different selections that we want to animate then and using this t will make sure that all of those sinks together. The other way we're using is we have a selection, and we have a we call transition and we pass in this t into here.

[00:05:27]
And whatever attributes come after the start of transition t, is kind of that state B that will transition to, and D3 will kind of rely on everything after that transition. To know what attributes or styles to animate, and then it will look at kind of the attributes or styles that we've set before transition to figure out if there's a state either we should be transitioning from.

[00:06:08]
And if you cannot find any of the like, corresponding attributes being set before the dot transition, it will just default to the SVG elements or it will use the SVG elements defaults.