Enter-Update Solution

[00:00:00]
>> Let's do this exercise together now, and let's do the updating bar charts the old way. So we will start, By creating, So for this one, I passed in the svg element. So let's select that. And we're going to select all of the rectangles in that svg. And then we're going to bind our new data.

[00:00:37]
And for the key function again, we'll pass in, we just use the datum itself. So we have our rectangles with our data bound. Now, let's exit any of the extraneous rectangle elements, that are no longer in the new data, right? So we're gonna take our rectangle selection, and we're gonna get the exit selection.

[00:01:07]
And we're going to remove that from the DOM. Then we're gonna get our enter. So we're gonna say enter the append, and we want to append a rectangle, like here. And for the enter, we're going to set some of the attributes that do not depend on data. So that would be width, we're going to use rectangle width.

[00:01:36]
I believe I also do a fill, I think I do a pink fill, and I do I believe a stroke. And I think I use plumb, and I think I used stroke width. And I think I set this stroke width to 2. So that's our enter selection, and let's go ahead and save our enter selection in this variable enter.

[00:02:01]
And finally, let's merge our enter and update selection together. So we're going to do enter.merge rectangle. And we're going to do now, the attributes that depend on our data. So that was our exposition, because our exposition we've gone back to using the simpler way before the scales. And so we're going to just say, what our index is multiplied by our rectangle width as our x position and for our y position.

[00:02:45]
We're gonna use, for this example hard coded the height of the container to be 100. So we're just gonna do 100 minus our data. And finally we're going to set the height of our bars, to be the bound data is self. So here is our data binding, our exit, enter and enter update.

[00:03:16]
And I received a question and in a previous workshop along time ago, about if the if the order of all of these matter. And I remember that the answer, the conclusion we arrived to is that in this old way, and the order does matter. And it's that it's quite important for us to remove everything first.

[00:03:50]
And then we want to be able to create all of our new elements. So that those new elements can be merged together with the existing elements. So it's a very specific order. And I think they know about whether the exit needs to come first. I believe that, that was because there was an edge case.

[00:04:16]
I think if you had nested selections or nested elements, then I think this order starts to matter. So, I now just kind of default to this order, and then just think of it as like a personal best practice. So now, that we've done that, let's go down here and see if it's working.

[00:04:40]
So if we click new data, there we go. So it is drawing the new data, every time we click on the button. So it is working as we expect. Let's recreate our simple bar chart with the new way, with the join. So, let's start with selecting the svg again, and .select all rectangles.

[00:05:18]
And binding that data in the same way, with the same key function of the data. This time around exciting part is to do just the .join for the rectangles, and this should now, Create all of the rectangle elements we need, nothing will show up in our svg yet.

[00:05:45]
But if we inspect it, we should be able to see it in the DOM. So let's take a look, and the new way indeed, we have all of the rectangle elements and then if we do a console. And take a look at the rectangles, and scroll all the way down to the bottom and we see that we have the data being bound.

[00:06:09]
And so this dot join this one line, replaced all of the lines of enter and update and exit in the old way. And so now, we can go ahead and because that join is giving us now all of these rectangles. With all of these data bound, let's go ahead and set all of the attributes that we did before.

[00:06:33]
And so just so you don't have to sit through it, I'm gonna copy and paste it. So I'm gonna go ahead and copy and paste all of the dynamic attributes. And then I'm gonna go ahead and go back up, and copy all of the static attributes. And with this just have this one book.

[00:07:06]
And that should take care of all of our enter, update exit. So let's take a look, and there we go. It's both creating the exact same things. But the new way with join is just, so much more convenient and much less verbose than the old way with our enter, update, exit.

[00:07:30]
So this is what it looks like, but you might be, after all of this work that we did with these different ways. You might be feeling a little bit dissatisfied, or at least I'm feeling a little bit dissatisfied. Because as we can see here, every time we update sure they both work, but this looks like the same effect.

[00:07:54]
As if we had just completely emptied out, our svg on every update. So every time we got new data, like if we chucked out all of the svg elements, I mean, we just like redrew everything from scratch. And this looks exactly the same as that. So why are we going through all of this trouble?

[00:08:15]
And the answer is this whole enter, update, exit pattern, or this join. Whichever way you decide to use, this is extremely powerful and really nice. When we combine it with D3 transitions, if we combine it with some animations