Filtering & Updating Data Solution: Filter & Update

[00:00:00]
>> Hopefully with this exercise, you now have enter update exit working for our film flowers using the new way with join and let's code together on this. So, as we always have, we have our SVG. And we're going to first start out with our parent group element. And we're going to say svg.selectAll of our Group elements and we're going to bind the data from our flowers.

[00:00:48]
And in this particular example, and a filter flowers, I'm sorry filtered flowers. In this particular example, we're going to use the title as our key, in our key function, and instead of ID. We again, if we were making a full on visualization project, I highly recommend using a unique ID.

[00:01:19]
But for this example, we have the title so, and that I think will work well enough. So let's use that as our key. And and let's use join. And because we have to create some pads and texts within our parent group element, we're going to pass in some functions.

[00:01:46]
So the first one is a function and we're going to receive our Enter selection. And so let's go ahead and create our group element on that. As you might remember, and actually, then after we create the groups, let's create the pet the paths and texts. And so, again, we're going to do selectAll paths in our parent group element.

[00:02:25]
And then we're going to bind the data. And this time around, we are passing in a function and to create our multiple petal paths so that again, we're doing .times and we want the number of petals. And we're going to use and so I think Bruno in the chat has suggested another way of copying over our data into a new object.

[00:03:08]
And I hope I remember this correctly. If not, we'll go back to how we had done it before. And that is we can first put in our rotate. And so that is the index times 360 degrees divided by the total number of petals. So we want to actually, let's do this and it's close.

[00:03:39]
Wait, no, that's correct. Return, rotate and we use the spreader D and that should hopefully get us and the data object that we want. And then here, and for this particular one I am these petals. These path elements, the are children of our parent group elements. We can either passing IDs but because we're not trying to do any like, I'm difficult updating on them.

[00:04:26]
I'm not going to pass in a key function. But if we were to pass in a key function, we can indeed do it after that first function. So after we pass in the function to create our data array, we can certainly pass in another function that maybe says like maybe it's the rotation.

[00:05:01]
Yeah, that's a bad example but and it's it really is that we don't need it for our petal pads but if you find that you need to be able to distinguish your children elements also, then you can always pass in another key function after this first function. We're going to cojoin, so that this part takes care of all of the enter, update exit for us.

[00:05:31]
And then I'm we are going to set the attributes on our petals as we've done before. And let's just quickly do that together. No, we want to rotate. So we use d.rotate and then we want to scale these pedals also d.scale. Let's define attribute and we're using d.path for that.

[00:06:07]
And fill is our d.color. Stroke is also our d.color. And fill capacity and fill capacity is just 0.5 and stroke width is 2. And once we have this part done we should be able to see it our flowers overlapping each other. There we go right there. All of her flowers are just kind of overlapped on each other, like on that 00 position.

[00:06:50]
That's okay because that means our petals have been created and let's create some text. So let us do the g.append that text and let's see, .text, d.text. And just some notes of text anchor. So center our text and vertically center our text and then, Set, The font size.

[00:07:48]
So this is the same thing as before, so I really don't need to be doing this right now. Okay, so and now we should be able to come back and see, You're not seeing it and that's because yes, I haven't set the text on it yet but and we have the text element created for each of them.

[00:08:11]
And I want to put in a note here that you might be noticing we are doing the whole Enter, Update, Exit pattern for the paths within the parent group elements, Enter selection. We're also doing you know all of our data dependent attributes setting within the Enter selection. And this is just because in this particular example, we don't do any updating on the petals within the flower, the title within the flower.

[00:08:44]
The only thing that changes is kind of whether the group, itself the flower, the whole movie itself gets filtered out or not. And thus, the all the pedals inside don't change and so that's why it doesn't matter if we are doing all of this creation within the Enter selection for the group.

[00:09:12]
If for example you have a nested structure where your children the element we'll update and change when the data on your parent element changes also. So both of these needs to change, then you would want to change some of these kind of updating parts and on what the joint returns.

[00:09:37]
So you want to chain all of these kind of data setting and so you will want to take this out and you want to say .selectAll the pads on the Enter plus update selection together and and set all of the attributes the data dependent attributes on there. But because and we don't care about updating the children, it's perfectly okay for us, in this example to do everything within the Enter selection and that helps us keep the rest of everything simpler.

[00:10:27]
And for right now we don't actually need to do anything on the Update selection for the group. And we also don't need to do anything on the Exit selection for the group because this .join will take care of removing our excess selection, removing our extraneous groups out of the DOM.

[00:10:50]
Again, I'm we don't have to worry about all of the children elements and what happens to those because you know, as soon as the parent group element gets removed those children elements get removed also. So, for this part one of the exercise we don't have to worry about the Update selection or the Exit selection.

[00:11:09]
Instead, what we'll finish up with is we will chain on this .join, which again gives us back the Enter plus update selection. We will chain our trends form. Hence form because then and every time we filter down on these movies and then the positions of each of these flowers can update accordingly.

[00:11:35]
And so that will be d.translate. And so, hopefully if we did this part correctly, then, We did not, I did not, so let's see what happened and I'm going to scroll back up really quickly to see what's happening. Path, that is okay. So the otter is not being set, that's right.

[00:12:19]
Okay, so I know what happened. And what's happening right now is we have to remember to return that Enter selection and then once we've returned that s selection of group elements, the newly created group elements, then d3 knows in .join, to join and merge that Enter selection with our Update selection.

[00:12:47]
So now, we should have it correctly. And actually this is also incorrect because we want to get the title out of our data and hopefully that will have everything rendered cool. So now we have everything rendered. And if we then go ahead and try to filter. Perfect, so you see that all of the flowers are being entered and exited and updated to the right positions.

[00:13:20]
And so let's take a moment to kind of congratulate ourselves to getting this far. This is I think, very exciting. [LAUGH] So let's take a moment. Let's play around a little bit and enjoy the fruits of your labor. And yeah, all right, that is bugging me. So I'm gonna truncate that title.

[00:13:46]
So we're gonna do your truncate. We pass in the length to truncate two choose or pass in 20. Awesome, so yeah, look at that. There's also a little bit harder to tile up, but I think this is the fire-like flower petal that VJ provided us with, really, really cool.

[00:14:21]
Yeah, wow, I hope you feel a sense of accomplishment. [LAUGH] That was a lot to get to in these two days. Okay, and don't worry, if you weren't able to like type up everything in this code cell block, because again, we have everything in here. All of the solutions in here that you can reference.