Animate with Transitions Solution

[00:00:00]
>> Let's code along together. So the very first thing we can do is we can see. Let us as always start by selecting SVG, that's select all of our rectangles. And we bind this data, so we have this randomly generated array of data. And we'll pass in our key function.

[00:00:37]
And as before, we will do a join, but instead of saying that we want to join rectangles. We're going to pass in the enter selection. Because what we want to do is we want to be able to construct rectangles, create those rectangles. In the DOM, and then we want to be able to animate them up.

[00:01:19]
So let's work through the logic of those together. So if we want them to animate up from here, up to here. That means, first of all that we need the y position to be the bottom of our SVG container. And so, up here I have our SVG height and rectangle width that I've hard coded and so these are the attributes to transition from.

[00:01:54]
And the attr and so let's start with our height being at zero since they're all the way at the bottom. And we're going to have our y positions be the bottom of our SVG container. So that's SVG height. And, actually, I think we can just say return this.

[00:02:23]
We don't do anything to our update selection. And for our exit, we said that we wanted to animate our bars from wherever they are all the way down to the bottom. And actually that means what we want to do is get our exit selection, then we're going to set the transition.

[00:02:54]
So now everything after here is transition to the attributes that we want to transition to. So that's why after this exit dot transition, we want to transition our height back down to zero. And our y position, back down to the bottom of our SVG container. And then we kind of skipped over kind of like that middle step of what is our update plus, sorry enter plus update selection.

[00:03:32]
And on that one, what we're going to do is we are going to call transition. So this is our enter plus update selection, and so. What we want to do is we want to first of all, and because this includes the enter selection. I want us to animate from the bottom and then have a grow up, so let's have it grow up too.

[00:04:18]
So, attributes to transition to. And so we wanted to grow to the height that is based on our data and the y position. That is our SVG height minus our data. For our height. So this little position, so SVG height minus our data. And if we do this, we should see, actually, we also would want to set the width of each of these rectangles.

[00:05:02]
And we put that before the transition dot transition t. Because we don't want the width to be animating, so we do rectangle width and then we also need to put in the x position. And so the x position we want that to be updating every single time our data updates.

[00:05:31]
Because sometimes maybe our data shifts around in order, so we want the x position to be updating every time. And so that will be, we're just using the index to calculate index times the rectangle widths. And so we are going to take a look at. Ooh, look at that.

[00:06:05]
So there's a small detail that maybe you notice and that is. That for the elements the bars are animating in, you might notice that it's animating in from the left. And that's because we did not set the X position before the animation. So we didn't set the X position for kind of like the stage A.

[00:06:29]
And so it's defaulting to the svg. Rectangle elements default exposition in zero. So that's why the bar is animating in from the left when it's been entered. So to fix that, we want to adjust our enter selection, we want to also specify that, for the X position. We're going to actually, Set the x position already so we are going to have the bars created.

[00:07:14]
And once it's created we want it to already be at the x position for the bar and then we'll have it grow. And this is kind of the one place where it's an exception to the rule of thumb that I have. Where the rule of thumb being for the Enter selection, I only have reset the static attributes, the non data dependent attributes.

[00:07:46]
This is the only exception and when I want to create the DOM element with it starting from a specific attribute. So as in for this rectangle I want it to be created with the x position already attached on it. And the reason why we don't do it on the Enter plus update selection, the reason why we don't do it down here.

[00:08:23]
Is because if we did that there, then that means even on updates, on the update selection, it will get updated to the next position right away. And so it won't have that animation. And so that's why we want to set the x attribute here, and then I'm going to put in some of our colors.

[00:08:58]
So that was fill pink stroke. And our stroke width is 2. And now if we play around with this, you can see that the bars are created and they kinda grow up in the x position. That's been calculated, so it doesn't kinda enter in weirdly from the left.

[00:09:35]
And sometimes, if the same data persists, you can see that they slide around. And that the bars that need to be removed, they are being animated down first and then removed from the dom. Yeah, there's our transition exercise, and hopefully seen this as quite exciting. And hopefully seen that it only takes a few more lines of creating the D3 transition.

[00:10:11]
And then calling it at some key places, namely just here and also here on the enter update selection and here on the exit selection. Calling at just those two places and we get this really kind of nice animation to show us how our data is being updated. So yeah, I think even just that kind of few lines addition thing gives us something really powerful.

[00:10:44]
And of course, this is kind of a lot of code to fit onto one screen. So hopefully if you're coding along. And you haven't captured everything. I have the solutions to all of our examples in somewhere near our exercise. So, in this case, it is hidden here under this.

[00:11:10]
Here's what the end result looks like. And so you can kinda go in and take a look here.