d3.transition

[00:00 - 00:17] Okay, so we just talked about CSS transitions and we saw how great and easy to use they are. But whenever you want to do something that's a little bit more complicated, you 'll want to switch over to D3 transition, which is what we'll go over in this video.

[00:18 - 00:30] So I have a list of six rules that if any of them are true, you'll want to use D3 transition, otherwise feel free to use CSS transitions, they're pretty easy to use. It's really nice.

[00:31 - 00:40] You can have one line of code and then things are animating really nicely. But here's a list of a few situations in which they wouldn't just cut it.

[00:41 - 01:10] So the first is if you have multiple animations going at the same time and you want them to line up, the second one is if you want to do something when an animation is over, that's pretty hard to do with a CSS transition without just matching the duration and line numbers. If we want a property that isn't a CSS property to animate, so we saw this before with the X attribute, the Y attribute, you can't animate those because they aren't CSS styles.

[01:11 - 01:28] If we want to do special animations for new elements or elements that are being removed, it's definitely a little bit harder to do with CSS. If we want to interrupt a transition halfway through, you can't really do that with this CSS transition.

[01:29 - 01:59] And the last one is if we want some kind of custom animation that isn't just an interpolation between one number and another number. So CSS transitions are great for colors, they're great for number values, but for things like a text string, CSS isn't going to know how to interpolate between one and the other, but you could use a JavaScript transition for maybe changing one letter at a time or something a little bit fancier like that.

[02:00 - 02:18] So if we look at our example, this is basically the same setup we had last time . We have this CSS style sheet, but there's no transition values in here because we don't want to use CSS transitions.

[02:19 - 02:31] So this is basically where we started at the beginning of the last video. And we also have this chart building code, we're building our histogram, and we have this change metric button.

[02:32 - 02:44] So we're back at square one. So what we want to start with, again, is animating these bars when they change height with X and Y positions.

[02:45 - 02:58] Okay, so let's first remind ourselves about what D3 selection objects are. So we're going to log out this D3 selection objects of all the rectangles in our chart.

[02:59 - 03:09] So console log, our bar recs value. So I have my, I want to show you this in the Chrome DevTools first.

[03:10 - 03:18] So if we're looking at a D3 selection object, we have this groups key, this parent's key. This shouldn't be new.

[03:19 - 03:33] And then we also have this proto key here. So if we open this up, we can see all methods that are available on the prototype of our D3 selection object.

[03:34 - 03:43] These are all callable just like they are like groups and parents are. So we could go back and see the prototype for our prototype.

[03:44 - 03:57] So this is just a basic object. This has the typical object methods like two string and value of, but we're not going to use any of those right now.

[03:58 - 04:13] So on the prototype for our D3 selection object, we have all of these methods that we've been using. So we have attribute, we have append, enter, exit on their style here, text.

[04:14 - 04:29] So these are all things that we've used so far, but we also have this transition method right here. And I'm going to close the DevTools just so we have a little bit more space, but you can see that it's very similar within the code sandbox console.

[04:30 - 04:34] We just already have the prototype expanded. So you can see all of these methods.

[04:35 - 04:40] All right. So we have this transition method.

[04:41 - 04:55] So what happens if we just add it up here? So now when we're logging out this bar recs, we see transition instead of selection, which is what we saw up here.

[04:56 - 05:09] So this is a D3 transition object, which is a lot like a D3 selection object. In fact, you can see all of those same keys here under the prototype.

[05:10 - 05:30] There are a few more delay and duration that will go over in a minute, but we can still see select, style attribute. These attribute calls are still working, and they'll function very similarly to when we're using them on a D3 selection object.

[05:31 - 05:59] And you'll also notice that we have these two new keys, name and ID, and that's for naming specific transitions and for D3 to use to keep track of which transitions are which. The other new thing now is when we change our metric, every single thing we change after we call transition and turn this into a transition object, that will be animated from its current state to its new state.

[06:00 - 06:14] So right now this first bar has this shorter height, and then if we hit change metric, it'll animate up to its new taller height. Let's actually slow this down.

[06:15 - 06:30] So we saw that there was also this duration method on this transition object here. So we can use duration and set however many milliseconds we want this duration to use.

[06:31 - 06:43] It defaults to 250 milliseconds, which is about a quarter second. Let's switch it to take one second, which is a thousand milliseconds, just to slow things down a little bit.

[06:44 - 07:10] So one thing that doesn't quite work for me is new bars are animating in from the top left corner into their new positions, which is kind of fun, but a little bit invalidating to our mental model. So let's go ahead and figure out how to have them grow from the ground up, kind of like a lovely tree.

[07:11 - 07:37] So when we first draw these bars, remember our enter and append when we talked about data binding, we can, and then after they're appended, we add this rectangle here. We can set it so that the bars start as really short bars, but placed in the right position, and then those bars are animated up.

[07:38 - 07:57] So if we copy and paste all this code, first of all, if we have the same code when they're coming in, we're not going to get any animations for new bars. They're just going to appear like that.

[07:58 - 08:03] But instead, we want them to be really, really short. In fact, we want them to have a height of zero.

[08:04 - 08:17] So the y will want to be all the way down at the bottom of the bounds. So dimensions that bounded height, and then the height is going to be zero.

[08:18 - 08:34] So now when they come in, they're animating up from the bottom, which is really a lot more pleasant than when they were just appearing or coming in from the top left corner. Another thing that'd be nice is to add, let's change the fill when they come in .

[08:35 - 08:46] So let's make them a nice yellow green. So when they're coming in, they're this weird yellow green color, but they never turn blue.

[08:47 - 08:54] So we can turn them blue as they come in. Let's see how that feels.

[08:55 - 09:02] Corn, flower, blue. So this code is going to have them turn blue as they grow.

[09:03 - 09:12] But what if we wanted them to grow into the bars and then turn this blue color? So we could add another transition method down here.

[09:13 - 09:35] And as we can see on our transition objects, they also have a transition method . So we can chain transitions and what's going to happen here is once this first transition is ended, it'll call any transitions that have been changed after it.

[09:36 - 09:49] So once the bars are their right size, they're going to then change from the green color to the blue color. So this is a really nice thing you can do with D through transition objects is you can chain these transitions.

[09:50 - 10:07] So one happens right after another one ends. The next thing I wanted to cover is our text is kind of just switching instantly to its new position, which maybe looked fine at first, but now looks a little bit weird.

[10:08 - 10:22] Another our bars aren't there yet. So let's go ahead and grab this transition and also have our text animate in like that.

[10:23 - 10:38] And we'll want to set the, we'll want to position the text much the way the same way we did with the rectangle. So when our text comes in, let's just move it to the right exposition and move it all the way down to the bottom of our bound.

[10:39 - 10:46] So it's moving up with the bar. So our new dimensions that bounded height.

[10:47 - 10:58] There you go. And now our text is kind of smoothly animating with our bars, which is really nice.

[10:59 - 11:10] Another thing if we look at our transition object, there's another method called ease. So we talked about easing functions when we talked about CSS transitions.

[11:11 - 11:26] And we can also chain a different easing function here. And those are all pre-pended by d3.ease.

[11:27 - 11:37] So what do we want to start with? Let's do a nice ease bounce out is a good one.

[11:38 - 11:46] And at least in code sandbox, when you type ease, you'll see all the options here. Bounce out is kind of fun.

[11:47 - 12:05] So if we have our text bounce using this different using, it's still going through those same values, but it changes the timing. So we can see our text kind of like moving over and then bouncing a few times, which is fun for, especially when you're positioning things, it kind of looks like it bounces into place.

[12:06 - 12:29] But one thing you'll notice is that our text is now out of sync with our bars. And we could fix this by kind of mimicking the same easing for the bars, but what's a little bit easier to handle is if we take this easing and just create a new transition.

[12:30 - 12:41] So maybe up here, let's just create transitions. And let's call it update transition.

[12:42 - 12:53] And then we just have it do d3 transition. It has this duration and it has this easing.

[12:54 - 13:11] So how do we then use this instead of creating a new transition object here? So instead of adding the duration here, we can just specify a specific transition within the smooth brackets when we're calling that transition method.

[13:12 - 13:21] And we can do this, use the same transition for our text. So we have this update transition being passed, so that transition for the rectangle and the text.

[13:22 - 13:40] And now whenever we change that transition, it's going to have the exact same parameters, have the same timing wherever it's used. So we can also use, let's look for another good one here, ease cubic in and out .

[13:41 - 13:53] Also pretty nice. So it's going to be slow at the start, slow at the end, and kind of faster in the middle.

[13:54 - 14:03] All right, so let's expand this a little bit more. We animated our mean line.

[14:04 - 14:17] It's kind of jerking around here, so we can use that same transition for when we move that. Let's go find this is where we're updating it.

[14:18 - 14:40] That was really easy, so now our line animates with the same duration, the same easing as our rectangles and our text. And we can also, here's something that we couldn't do with CSS transitions, is we can animate our x-axis changes.

[14:41 - 14:58] So if we add this here before we call access, access generator on our axis, this will animate any changes to that axis. So now when we update, you can see that you kind of get a sense of is the axis getting bigger?

[14:59 - 15:24] Is it getting smaller? The ticks will animate to their new position on the new scale, which maybe doesn't make so much sense with the different metrics, but it makes a lot of sense when you 're, say, transitioning from one day to set to another with the same metrics, then it's really nice then you're like, "Oh, I'm zooming in," or "Oh, I'm zooming out," and you keep that context.

[15:25 - 15:41] All right, one other thing I wanted to play with is to have an exit transition. So we have this inner transition where they're green, and then they turn blue, but we have not done anything when the bars are leaving.

[15:42 - 15:59] So let's go up here where we're creating our update transition, and let's go ahead and make an exit transition here. I think we can leave it the same for now.

[16:00 - 16:30] And then when our bars are exiting, so we have enter a pen, but we also have exit remove so before we remove them here, that's just assigned this to a variable, so const old bin groups so that we can remove them down here. And then we want to select the rectangles within these groups.

[16:31 - 16:55] So old bin groups dot select all, and we want all those rectangles, and then let's just have them be red before they leave, just to make it really clear which ones are leaving. So fill of red.

[16:56 - 17:19] And then let's kind of transition them to use our exit transition, and then make it so that they shrink down to the bottom from whence they came. So we want to basically copy what we're doing here.

[17:20 - 17:41] So we want them to go all the way down to the bottom, and we want them to have a height of zero. And then our remove will want to remove all of these bin groups.

[17:42 - 17:59] So we'll go over here, and we don't want to remove them right away, but we want to wait for this transition to end. So as we saw before, we can chain things onto the end of transition.

[18:00 - 18:28] So if we use this transition, our exit transition here, and we add remove, it 'll wait for the end of that transition to remove those bars. Another thing we want to do is our text is kind of jumping out as well.

[18:29 - 19:08] So the same thing we did when the bars were entering is we want the text to jump down to the bottom, and then transition out. So let's do that by selecting all of that text here, and then using that transition, this guy right here, we don't need to change anything before we call the transition, and changing that y value to go all the way down to the bottom of our bounds.

[19:09 - 19:35] All right, so let's see what this looks like. So our exit transition is actually not finishing before our elements are being removed.

[19:36 - 19:48] That is because we're using our de-thru selection object for the transition, which is not going to work. Let's try that one more time.

[19:49 - 20:07] There we go. So now we can see when our bars are leaving, they're kind of shrinking down to the bottom, and then exiting.

[20:08 - 20:27] One thing that's interesting here is our transitions are kind of running all over each other, and as these bars are exiting, the other bars are animating in behind them. So one way we can make sure that they're not colliding is we can add a delay for this update transition.

[20:28 - 20:52] So if we wanted to wait for the end of our exit transition to then add the new bars, we can add a delay for this update transition, and then let's see what that looks like. There we go.

[20:53 - 21:14] All right, so that was pretty clear. So when that bar was animating out, it turned red, it went all the way to the bottom, and then the rest of the bar is updated to fit in its position.

[21:15 - 21:27] So that was a really quick run through of D3 transition. We learned how to use transitions, how to reuse the same transition, how to add the duration, set the delay, and set the easing.

[21:28 - 21:40] And a really quick recap of the three ways to animate our charts. The first one was SVG animate, really not even worth learning, but it's good to know about it.

[21:41 - 21:48] And you see it out and about when you're looking at examples. The second one is CSS transitions.

[21:49 - 22:01] These are really good for mainly stylistic changes that aren't going to have to deal with text interpolation or anything really fancy like that. And then for everything else, there's see through transition.

[22:02 - 22:10] It's still pretty easy to use, and it's really powerful as we saw with the ch aining and the delays and the using functions.