Filtering & Updating Data Solution: Animate

[00:00:00]
>> Let's do the part two of this exercise together. So the part two is that we are going to make everything anime. So let's get the first thing going which is that when in flower animates in, we are going to fade it in. So the very first thing we want to make sure to do is that we are going to, Set the opacity on the group element.

[00:00:34]
So let's go ahead and set the opacity to 0 on the enter selection. There's that and then we want the opacity to go to 1 after the animation. And so let's go ahead and come down here, create our transition, pass in our T that we've defined up top.

[00:01:12]
And we're going to say that we want the capacity to animate from 0 to 1. And just a side note that we could have actually put this in the enter selection because it really is just the enter selection that we want to be feeding in. But since we're going to be doing the animation.transition call down here anyways, it's just saves one or two lines to be doing it on the enter an update selection.

[00:01:46]
For this on the update selections nothing happens because with the update selections the opacity is already 1 so it's going from 1 to 1. But for the enter selection in here, it's going to go from 0 to 1. So actually let's take a look at if this is doing what we expect it to.

[00:02:09]
And, So we're definitely seeing the animating to the new position. Definitely seen that. So let's see what happens if we, wooh, did you see that? My laptop's like, please stop making me do all this stuff. Okay, so what you might have seen is that it did feed in but also because we hadn't specified an X or Y we hadn't specified the translate on our enter selection.

[00:02:51]
It defaulted to all of the flowers being on 0,0 and that's why everything kind of just like animated in, everything that got newly created, they got animated in from the top left. So let's go and fix that, and I'm just going to be, because I'm lazy, I'm gonna just copy it and paste it here.

[00:03:13]
And so this, everything in here is going to be the state A that we transition from, because it is before the .transition is called. And then the last thing we want to do is go ahead into our exit selection. So let's go ahead and do nothing with the update selection.

[00:03:39]
This is a comma and then go into our exit selection. And we want to save that. We want to have those exit elements, those elements being removed to go from 1 opacity 100 to opacity 0, so it currently has opacity 1. So we're going to say transition, and we're going to say opacity, 0, and then we're going to chain remove on that and d3 knows to only remove the DOM element once this transition finishes.

[00:04:23]
So now let's take a look. Let's, I don't know if you saw ooh, look at that. So this is maybe a little bit hard to see but you can see that some of the flowers got faded out and then some got faded in and they definitely all move to their new place.

[00:04:52]
So there's this lesson all done. I hope it was fun. I think this is one of the more exciting exercises where we get to kind of see some animations and we get to filter down on our flowers. Yeah, so we've implemented a filter by option.