Introduction to Data Visualization with d3.js v4 enter() and update()
This course has been updated! We now recommend you take the Introduction to D3.js course.
Transcript from the "enter() and update()" Lesson
>> Shirley Wu: This is the part that I think a lot of people were asking about when we were covering the entering. So people were like, if I have like not the same number of things on like not like if we have three reqs and five data elements like what happens then?
[00:00:18] So this is where we go over that. And so,
>> Shirley Wu: When we talk about enter update exit,
>> Shirley Wu: The way to think about it is, you have your first data set. So you have your first state, and then you have maybe something changes to that data. So this was also the question previously about what if you have live data coming in, and then there's your first state, and then some of the data changes, and there's your second state, and your third state, and your fourth state.
[00:00:54] How do you account for all of that data changing? And maybe in your first data set, or maybe your second data set has more or less data points than you first data set. How do I deal with that? So one of things that I wanted to mention is this kind of concept called object constancy.
[00:01:14] It's a really short article that you guys can read afterwards, but the really simple boiled down is if you have data that changes between states, you want to make sure that for each of those objects, that the user, how do I describe this well? That the user has a way of following what happened to that object, between one state to the next.
[00:01:41] So the example here is, so these are I think age bracket. What's the percentage for each of the states, so the y axis is the states and then the x axis is the percentage of people 65 years and older. Or, and then there's all these different options of like what about under 5 years, 5 to 13 years, etc.
[00:02:05] So this is like, all of these different data sets. And then, you want to transition between each of these data sets. So then, right now it defaults to 65 years but if I, let's say, do 45 to 64, notice that little transition. So, some of the states have been pushed down, some of the states come up.
[00:02:30] Some of them stay on the screen because they're the top. I'm guessing this is ten. And they're the top ten states, and then maybe their bars just increase or decrease in width.
>> Shirley Wu: Yeah,
>> Shirley Wu: This is what's happening, and then underneath the hood I haven't verified this but I'm pretty sure Mike isn't making like 50 bar graphs.
[00:03:02] And transitioning those 50 bar graphs up and down, he's making these ten rectangles and then he's transitioning those in and out.
>> Shirley Wu: As you click on the different states. And then he's animating them in and out or like wider or less wide. So yeah, that's the concept to object consistency.
[00:03:26] And that's kind of like the reason why D3 has this whole thing of enter and exits to deal with it. The examples I was going to show you,
>> Shirley Wu: Was this visualization I did a few months back of all of the lines in, have you guys heard of Hamilton the musical?
[00:03:46] Okay, cool [LAUGH] I've been obsessed with this for like the last almost year. And so I took each like one of these lines. So each like bubble is a set of lines but some by character and then visualize it. So I do like a bunch of analysis then I talk about it and then you can like interact with it.
[00:04:05] But the part that I want to show you, all the way at the bottom.
>> Shirley Wu: Is this kind of concept to like, here's all of the lines and I build a filter tool for it. So I can filter by let's say, like Angelica. And so here's all of the songs, all of Angelica's lines and her songs,
>> Shirley Wu: And now maybe I also want to filter by this like one theme and then, so everything all gets faded out. And then, just those lines are remain, did you guys see that little like transition where jump all the way up? [INAUDIBLE] It jumped all the way up, and then when I deselect, it comes back in.
>> Shirley Wu: Yeah,
>> Shirley Wu: And so, that's kind of object constancy, right? Like,
>> Shirley Wu: So that you get a sense that, there are data points that are staying, there are data points that are leaving but you kinda get the sense of, them all I guess connecting together. So this is the example I have.
[00:05:22] And then we are going to, this is a big section, where we go into how that all works. Yeah, are you guys excited? [LAUGH] Cuz once we're past this hurdle, the rest of D3 should be super easy. Once you get this, the rest of that library is all yours.
[00:05:40] So the very key concept about how the enter, update, exit works is, thus far, we've been using this .data function, and remember how we only pass in just this data, right, like we've only been doing that data, data. But there's actually a second optional argument that we can pass in called the key function.
[00:06:03] And that key functions essentially goes through all of your like loops through your data and then you return whatever the key that identifying key for that data should be, that data point should be. So in this case, I'm just saying okay, the data that I end up passing in is just in that ray of integers.
[00:06:28] So I'm just saying just use my integer as my key. If you have pass in let's say a ray of objects and each of your objects have an id attribute. You can say use d.id as my key function, or u can use d.name as my key function. The most important thing is that your key function should return unique results, unique strings, or unique integers for each one of your data points that's the only thing.
[00:07:02] If you don't return unique strings for each of your data points D3 will get confused and think that those two that have the same key, are actually the same thing and combine them together. So you might get this bug of like, you have like, ten data points, but then you only see nine on the screen, and you're super confused.
[00:07:23] And that's because you didn't give it unique identifiers, unique yeah, IDs, keys, keys, IDs. So that's the only thing to make sure to be very careful of. And then, so once we have that, let's talk about .data, and then key function and how it all works. So this is, let us pretend right now that we have five rectangles on the screen.
[00:07:55] And those rectangles have data bound on them such that these in the red are their keys. Like what gets returned by the key function for each of those rectangles. And then this is my data set and it has six data points. And because like our key function right is just really simply returning the value, these are also their keys.
[00:08:23] So, the first thing that data like calculates for us, is it figures out what your quote unquote update selection is. And what that means is it takes, executes your key function and it says okay on this side this 120 maps to this 120. So this 120 in the data maps to the 120 in the rectangle.
[00:08:49] And there's 250 in the date maps to the 250 in the rectangle. And so those are the two rectangles, these are the two rectangles that match the data so they're going to remain on the screen. So that's the update selection. Yeah, so the data calculates for us the update selection.
[00:09:09] The next thing that .data calculates for us is our enter selection. So it looks at both and it says these are the data points and there's 233, 145 and 75 are the data points that don't yet exist in the rectangles because there's no 230, or 300, or any of those.
[00:09:31] So .dataset okay, we need to create four rectangles, create four rectangles to be able to match the data. And that's what's happening here and that's the enter selection. And finally .data calculates for us it looks at the rectangle and says, here are all the rectangles whose key doesn't exists in the data.
[00:09:58] So that's 100, the rectangle with key 100 doesn't have an equivalent on the data side, same thing with 175 and 200. And that .data calls that the exit selection. That's the three rectangles that we need to get rid of from the screen, from the DOM. And to be able to match with the data.
[00:10:26] How are we so far? Do you want me to repeat any of that?
>> Speaker 2: I think I'm just a little confused between the data values and the keys, so like the one, what your talking about here are meant to be unique keys, right? Like it's not the value itself.
>> Shirley Wu: Yeah.
>> Speaker 2: So if it were like a time-series or what if it's an index like 1 through 100 if we are 100 data values.
>> Shirley Wu: Yeah, and that's perfectly fine, yeah I did I 'm using data and key like I'm using value and key as like the same thing here for the sake of simplicity.
[00:11:03] But in practice you should be using, you should create anything that makes sense for you as the key. So if that means for 100 values just specifying one through 100, [INAUDIBLE] and if that works that is great. If for example in our, let's say our temperature dataset that we've been working with.
[00:11:29] We might use the date as our key, because the dates are unique across the board. And we wouldn't want to use the temperature value, because that's not unique.
>> Speaker 2: So it's almost like a row number a little bit?.
>> Shirley Wu: Yeah.
>> Speaker 2: In a dataset.
>> Shirley Wu: Yeah.
>> Speaker 2: So when you're reading your data your keys would just be all the row numbers, associate with each value.
>> Shirley Wu: Yeah.
>> Speaker 2: And then, if you'll need to show the first ten rows, those are the keys you'll pull out to this way.
>> Shirley Wu: Yeah, so the only thing is make sure that those keys are the same across all of your states. So like if you, for your first state only pull like rows one through 10, but then your next state, you actually pull rows, like 10 through 20, make sure that these keys are 10 through 20 and not 1 through 10 or anything like that.
[00:12:21] And actually if you don't provide a key function, what D3 does, is under the hood it assumes it kind of applies a key for each of them, that's just the index. So yeah, it just uses the index as the key. But for something like, for if you're transitioning between different states that have like different dates or different categories, or in the case of this object constancy, the key function for this one should be the states.
[00:12:58] That's one when you want to make sure not only are they unique but that they're unique and constant across all of your states. Yeah, data states.
>> Shirley Wu: Question?
>> Speaker 3: Yes, we had a question about the function that you pass in to find the key. Does it accept a second parameter for the index?
>> Shirley Wu: Yes, it does so the key function will accept both data or it will give you both the data and index, and you can then return any string or integer you want. I think the integer will just get coerced into a string or something like that.
>> Speaker 3: Sorry, one more question that just came in, does D3 have anything built in for sorting data?
>> Shirley Wu: No, I don't know off the top of my head maybe in D3 array module, maybe. So I do know that there is, just because when it comes to manipulating the data, I just use something like low dash, and I don't use D3. But I think D3 array might, if you look into it D3 does, however, have a sort function for the selection.
[00:14:13] So if you have an array, if you have your selection of five rectangles and you want to sort that because somehow, it actually re-orders the rectangle elements in the dom. So, if you had five rects, and it was one, two, three, four, five, and you wanted to sort that the other way around, it actually rearranges it in the dom itself.
[00:14:41] So, that's selector.sort, so d3selection.sort. But, I'm not sure about array sorting the data, yeah. Yeah cool, is there anything else that questions about enter exit. The update selection, the enter selection, and the exit selection. Or was it straightforward enough, straightforward enough? Cool perfect, in that case, let's go on to that console log again, that's like super tiny.
[00:15:18] So remember how we looked at this a little bit underneath the hood but I want to kind of emphasize this again. So this is the, this groups part, all the way towards the bottom, that's your update selection.
>> Shirley Wu: And then this enter section, that's the four rectangle place holders that we need to create.
[00:15:46] And then this exit is the three rectangles that I mentioned earlier that needs to be removed, so that all of this matches the new data set. And I think a great way to think about this is I was talking to Stu earlier, and we were talking about how we want to think about this as how like the whole point of D3 is to, God, what was the wording that we used?
>> Speaker 3: Describe.
>> Shirley Wu: So we want to describe what we want on the screen, so that when we get the data, that data will be described on the screen correctly. So I think a lot of the confusion with D3 comes from the fact that we start defining what we want to like we started defining our rectangles and our attributes and all of that even before we have any elements on the screen.
[00:16:44] And like, that whole like, like why are we describing things that don't yet exist is I think what confuses a lot of people, but if we kind of turn that mentality around 180. And instead of thinking of it as elements to manipulate with the data, rather, think of it as the data dictates what showed up here on the screen.
[00:17:09] And all you're doing is describing once we get the data, this is how that data should look like on this screen. So, yep.
>> Speaker 3: Yeah, we have a question from Leo about the enter exit update paradime.
>> Shirley Wu: Okay.
>> Speaker 3: I don't know if anybody here is familiar with react, but react invests blood and treasure into figuring out whether or not something needs to update at all.
[00:17:34] And so, if you go into your data and you just tweak one element, is it smart enough to leave most of the dom alone and only tweak just that one changed element? Or does it re-render the entire thing?
>> Shirley Wu: Okay, so I love that question. So is, so the example was react is really, wait actually everybody hears the question.
[00:17:58] So I don't know why I'm repeating it. So I actually love comparing D3 with react because the way that I think about it is react is essentially doing under the hood what D3, you have to do with D3 yourself. And what I mean by that, is react is really smart in figuring out what is the smallest set of changes that you need to make to get from the first state to the next state.
[00:18:21] Where as with D3, the enter update exit, how much, how the dom gets rerendered is only as smart as you.
>> Speaker 3: [LAUGH]
>> Shirley Wu: As in D3 gives you all of the control about what you want to do with the enter update and exit selections. So if you are smart about it and like, okay, I only need to update these attributes for the update selection, and this the things that I need to do with the enter and update selections.
[00:18:57] And this is the thing that we need to do with the enter selections, if you make sure to think that through and only manipulate, like only edit where it's necessary then it will have the same effect as react. But if you are just like update all these attributes all the time on all the selections, then it would just rerender dot and the dom all the time, right.
[00:19:22] So all D3 does is it gives you what each of those selections should be given the first set of data and the second set of data. And you figure out what to do with each of the selections.