Introduction to Data Visualization with d3.js v4 Enter-Append

[00:00:00]
>> Shirley Wu: The question we had earlier. What if we have more data then we have rectangle elements? So this piece of code gives back the exact same bar graph that we had earlier. The only difference is now we don't create rectangle elements. So, when we're doing the svg.selectAll, what are we even selecting if they don't exist in the DOM?

[00:00:33]
>> Shirley Wu: And the answer is, it's an empty selection. And this blew my mind when I first realized. So how are those bars even appearing? So this is the part, the data enter append, and that's the magic. That was the like [SOUND] mind blow moment for me when I first learned D3.

[00:00:56] So let's go through how this is working underneath the hood. So,
>> Shirley Wu: That same doodle from earlier. So when we do .data and we enter in the set of data, we pass in the set of data like we did before.
>> Shirley Wu: This's what that data is calculating. It's saying, here is all my data that I had been posting and this all the rectangle elements that exist on the screen right now which just happens to be zero.

[00:01:34] Which means I need five rectangles, I need to create five rectangles to match that data. And that's all that data figures out. And then what that enter comes and does is, it says, okay, I need to have five place holders for the right elements to make sure it matches the data.

[00:01:56] So, it just puts in these five place holders. And then finally, when you dot append, it takes those placeholders and actually creates rectangle and rect elements out of them, and also at the same time binds all of that data. Yeah, so that's essentially what's happening for data Enter-Append, and then down here is this, exactly the same piece of code as earlier.

[00:02:22] Because after the data has been found, you can just access it with any of these functions like we did before.
>> Shirley Wu: So I have another\g play with the code.
>> Shirley Wu: So this time, try console logging, I can actually do something like,
>> Shirley Wu: Let's see. Let's just give this some sort of variable.

[00:02:52] Let's just cal it enter. And what I'm gonna do as I figure out, as I Console, go through in Console log is I'm just gonna comment out everything underneath selectAll, and I'm just gonna look at enter.
>> Shirley Wu: And I'm going to open up my console.
>> Shirley Wu: Okay.
>> Shirley Wu: Okay, so this is one that we saw earlier, except now, let me look at the groups, where there should be the note list is zero because we don't have any rect elements on the screen.

[00:03:40] So, this part just returns that with no elements. Now let's console log the dot data portion. This is what it looks like.
>> Shirley Wu: And you can see now this one says array of five, under the groups which is kind of like, what D3 thinks is existing on the screen.

[00:04:05] But if you open it up, it's still empty because there's nothing that exists on the screen right now. Can you guys see?
>> Shirley Wu: Yeah. So groups is essentially what d3 knows is on the screen. And right now, there's nothing on the screen. So the array, even though it says five, it's empty inside.

[00:04:30] And then, when you open up enter, it says array of five. And this is all of the placeholders. So it just says I don't know why it is called z. If you open that up, you will see that it has that data bound to it that we were looking at before.

[00:04:48] There are the five placeholder elements. And then if we Console log, lets just console log what happens on Enter. So dot enter.
>> Shirley Wu: So this is what we're console logging.
>> Shirley Wu: And now you see, there is, it returns these groups and it returns all of the placeholders in here, so that when we do dot Append,

[00:05:38]
>> Shirley Wu: We get all of the rectangle elements,
>> Shirley Wu: With the data bound. All right questions?
>> Speaker 2: Yes, one question is, can we use Bootstrap 3 as well to change the display of these items?
>> Shirley Wu: Okay, so I haven't used Bootstrap in quite a few years, but with Bootstrap three, I think how you can use Bootstrap is you just set a lot of classes, right?

[00:06:14] So, yes. The answer is yes, and what you could do there actually is if you take a look at the selections API. So .attr isn't the only function that you can use with the selection. There's a lot of other functions that you can use, like .style will set CSS, dot.

[00:06:35] But in the case of classes, if you want to use Bootstrap, and you want to set specific classes depending on the data, what you can do is called, actually, you can just say dot attr. I think if you just do dot attr class. And then, [COUGH] you just say, if the data is equal to cat, return, this is what my classes should look like.

[00:07:14] [LAUGH] And then like if it says blah, blah, blah, you can return some other, whatever the classes should look, whatever other classes there should be.
>> Speaker 2: Thank you, and then we have two more questions. One of them is basically the SVG elements created with enter append element is one per line for the CSV file or the row in the database, or whatever array of data that you're given, correct?

[00:07:51]
>> Shirley Wu: Yeah.
>> Speaker 2: Let's say you have seven rows of data, you'll get seven items right?
>> Shirley Wu: Yes, precisely.
>> Speaker 2: Good, okay, that makes sense and then the last one is from Leo. How do you select one specific piece of data? Let's say you wanted to represent value 250 with a red bar.

[00:08:10] How would you do that?
>> Shirley Wu: Yeah, okay, awesome question. So first of actually let me show you just for the sake of it, I'm. Let me give it 60 and 20 and then let me also make this smaller. So it's as simple as that, when we use data enter append.

[00:08:35] This is why D3 stands for data driven documents, because the idea is the dom should reflect the data that you have. So, it was as easy as me putting in two more data elements and yeah. So that was the first one and then the second one is how do we do something with a specific data point data.

[00:09:06] So the question was let's say we want to just make it blue for everything except for 250. So we say okay if the data is equal to 250 actually let me not do this shorthand, okay. Let me do it the proper way. If the data is equal to 250, I want you to return red.

[00:09:33] So now, the default for fill is black. So everything else is black, but the element that has 250 bound to it is red now because we have told it to return red. And then I say okay, for everything else return blue.
>> Shirley Wu: And that's all it takes. And that's the beauty of D 3 that once you have the data bound, you can do absolutely anything with it.

[00:09:56] You can return for the functions. You can do anything you want as long as it returns a valid value for that specific attribute.
>> Speaker 2: Can d3 replace jQuery?
>> Shirley Wu: I feel like I'd get into some sort of an ideological war with this.
>> Shirley Wu: I'm going to say,
>> Shirley Wu: I actually don't think so.

[00:10:27] And I say it this way, I think jQuery, okay so I also haven't used jQuery in a good few years because I do data visualization. So I pretty much use d3 and d3 like does all of the selections I need. So this opinion comes with a grain of salt that's like a few years old.

[00:10:46] So when I used jQuery, I think jQuery the power for it for me was like all of the different selectors it has but also the way that I could chain like getting the parent of an element, or getting the sibling of an element. That was that and also, I think, all of the event handling, I think I used to use that.

[00:11:06] But there is a specific set of things you can do with jQuery that you can't do with D3. And I think for each of the libraries out there, I mean, there's thousands of libraries out there, I feel like. But for the big ones that people use a lot, I think there's a specific use case for each of them.

[00:11:26] And D3 meets the use case of visualizing data on the web and jQuery meets a very different need. So If your need is just visualizing, like sure D3 for sure will replace jQuery but it doesn't replace jQuery for absolutely every use case.
>> Shirley Wu: Yeah, hopefully I didn't start a war [LAUGH].

[00:11:54]
>> Speaker 2: So previously we asked what happens with unbound data. The question has been redefined a little bit more, and it has to do with, let's say that your data was an array, one, two, three, four, five. After it was done binding to its nodes, if the node count was less than the data array size, then there would be unbound values.

[00:12:20] It would help a lot to know what to do in those situations where you have, it seems like you have a mismatch between how many elements you have and how much data you have. How, are there any tips that you have for dealing with these types of discrepancies?

[00:12:34]
>> Shirley Wu: Okay, so If I am understanding the question correctly, it means that, If there's like three elements on the screen. But five deal elements, like what happens then? Was that pretty much the question?
>> Speaker 2: Yeah, it's something similar to that. There was, this person is asking whether or not there was a tool that allows you to see the state of the data.

[00:13:05] Is there a tool that you can use to actually look into the DOM and say, okay, what data do you believe you have?
>> Shirley Wu: Okay, great question. So different from what I was saying, the three versus five. Let me just say for the three rectangles versus five data elements, we'll cover that later in much detail.

[00:13:28] But that question is essentially like how do I see the state of the dom elements on a screen and what data has been bound to it. So the answer for that is console.log actually I think what I'm gonna do is open this up so then I can just switch back and forth okay.

[00:13:55] So there is a very awesome function called .nodes. And what .nodes does when you chain it onto a selection is essentially lets you see, hold on, I need to console.log that. Console.log enter.nodes, and what that shows for you is essentially all of the elements that you have selected, so it kind of just gives you that.

[00:14:26] But if you want to see the data that's been bound, you do enter.data. And when you don't pass anything in, if you don't pass any data into the .data function, all it does is it returns you the data that's been bound.
>> Shirley Wu: And so those two, those two functions together can help you depending on what your need is, it can help you look at what data is on the screen, that's been bound to the screen.

[00:14:56] So if you just want to, you can look up the data this way by opening it up.
>> Shirley Wu: Each of them up.
>> Shirley Wu: But if you find that really annoying then .data is what you need, yeah, perfect.
>> Speaker 2: We have one more question. Very straight forward, what is the browser compatibility of D3?

[00:15:24]
>> Shirley Wu: 100%?
>> Speaker 3: Yeah it's just JavaScript.
>> Speaker 2: It depends on what you do with it.
>> Speaker 3: Yeah, so if you're using svg then browser support can be shotty depending on the types of filters you use on svg, or something like that.
>> Shirley Wu: Yeah.
>> Speaker 3: But it's just basic DOM and JavaScript, so it works everywhere.

[00:15:43]
>> Shirley Wu: Yeah. So I guess adding on to that, I think there's nothing really special about what D3 is doing So D3 is just supposed to be kind of this utility function, this tool to help you manipulate the DOM. So if you use SVG, if you use Canvas, if you use HTML, D3 is basically just a tool for you to manipulate that.

[00:16:16] So D3 is compatible with any single browser, like Mark was saying, it just depends on what you're using. So I think SVG actually wasn't available in IE until IE8 or something like that. So it's just basically what you're using to draw to the screen, yeah.
>> Speaker 2: That's a good point.

[00:16:39] If you're using SVG, then you'll need to have SVG compatibility. It's not necessarily D3's fault.
>> Shirley Wu: Yeah.
>> Speaker 2: You used it to render SVG.
>> Shirley Wu: I had one quick question from the group and that was if I save it, if a forked it, it's in my own account, I save it, I'm not seeing it in my blocks, and is it really saved?

[00:17:07] Blocks takes about ten minutes to refresh, so if you don't see it in your own little profile, don't freak out. It should come up in the next half hour. Was there more questions?
>> Speaker 2: There was a question. One of the questions is, what if you take the SVG element that you have here in your code, and I believe in the HTML, and instead of saying, svg and then closing svg, you instead hard code it to rect elements inside of it, and then ran D3 on it, what would happen then?

[00:17:45]
>> Shirley Wu: Okay, what's the best way to show this? We can do that right now, and then, yeah, let's do it. So let's put in two rectangle elements.
>> Shirley Wu: Yeah, isn't that fascinating?
>> Speaker 2: Mm-hm. So you had two rect elements in there, and now I'm seeing three?
>> Shirley Wu: Well, okay, so let me see what is the best way to describe this.

[00:18:29] Okay, so, okay, let me do it this way.
>> Shirley Wu: Yeah, so we have two rectangle elements that's already been created. And then here, so you can see there's a gap here for the first two, that you aren't seeing, and then we see the three blue bars. And so what's actually happening underneath the hood is, if you open this up and if you inspect element, look at that.

[00:19:06] So yeah, this is what's happening under the hood. So this is the two rectangle elements that we've set in the SVG. And then, you can see, so it exists, but then, look at that. The attributes are only set on the three. So what's happening is actually, when we do, remember how we were talking about the .enter and .append?

[00:19:36] It only returns what should be entered. So in this case, because we already had two rectangles existing but then five data elements, the extraneous was the last three. And that's why .enter and .append only returns for you the last three rectangles for you to modify the attributes on and doesn't give you the first two that you already have.

[00:20:03] So let me actually right now, do a console log to really drive that home. Let's see, what should we be console logging? Let me do it this way. Let me console log the .data. So let's select all the rectangle elements, and then bind the data, and see what that looks like.

[00:20:32]
>> Shirley Wu: I understand that there is limited screen space. [COUGH]
>> Shirley Wu: So this is what happens when we select just those two and then bind the five rectangle or five data elements to it. So you can see underneath groups, which is what D3 thinks is existing on the screen.

[00:20:53] Look at that, it says array of 5, because that's where we want to get to, but it just has the two rects that already exists on the screen. And then enter, it says five. But it just has the three placeholders for the three new ones that we want to create.

[00:21:16] Yeah, super fascinating. And then when we do the console log,
>> Shirley Wu: It says five. When we have console log enter append, it says five. But then, there's only those three rectangle elements that should be entered. Yeah, any other questions?
>> Speaker 2: So if you wanted to do something with the elements that you already had, could you do that as well?

[00:21:47]
>> Shirley Wu: So what we want to do, actually lemme hold off on that question because that I think will get addressed in the update exit section of the class. But let's also try and remember so that we, yeah we go into that detail, yeah.