This course has been updated! We now recommend you take the Introduction to D3.js course.
Transcript from the "Selection and Data" Lesson
[00:00:00]
>> Shirley Wu: So let's get started. So, we will start with the selection and data. I will start with this piece of code. And all this piece of code does is give me this really ugly bar chart. So, it's like really ugly blue bar chart.
>> Shirley Wu: And so what's happening here is I am.
[00:00:21] I should probably ask, how many people are familiar with SVG elements? Okay, for now, we don't really need to know how it works other than that it pretty much works syntactically like HTML. And these are rectangle elements, so they would draw rectangles once we give them the right attributes for x and y positions and within height values.
[00:00:47] So, that's all we need to know about this for now. So, this is my code. And then, you know, I have SVG declared and I have five rectangle elements that I've created. And right here, I'm using D3 to select all the rectangle elements that already exist in the dom.
[00:01:08]
>> Shirley Wu: And with d3.selectall I can use any sort of like, basically any CSS selector and it will just go through, and grab everything that matches on the screen. We can also use d3.select to just grab the first thing that matches. But yeah, for right now, we're using select all rect, and then if we console log that one line, that d3.selectall rect, and this is what it looks like under the hood.
[00:01:38] And I want to start making sure that we look at how it looks like, what it looks like under the hood from the very beginning. So essentially what a d3.selection is, is it's an array of all of the dom elements that you've selected. And it's just wrapped around in these things, and so that you have like all of the APIs that are available to you for selection.
[00:02:09] So, you can use like .data. You can use .otter, and all of those functions are available to you with just this. So this is what a d3.selection looks like. And I want to like pound that home because I think that a lot of people think that selections are this like mystical thing that D3 has and you can like chain functions on it, and they don't quite know like what it looks like.
[00:02:36] It's super straightforward. It's just an array of dom elements with some functions wrapped around it. Nothing mystical. And then here's what I think a lot of the magic happens. So there's a function called .data and with this function, you pass in an array of data, so this is right here is my array of data.
[00:03:08]
>> Shirley Wu: And I'm passing it in. And what's happening is under the hood what d3 is doing, is it's taking a look at all of the rectangle elements that we've grouped with the selection so that's on the left hand side? Yeah. Hold the right angle is that we've grouped with d3.selection and what that data is doing is saying, hey, this is my array of data, on this side, and then let me just map them one to one.
[00:03:45]
>> Shirley Wu: And then underneath the hood what's happening here is for each of these rect elements, d3 is literary binding your data to the rectangle element. With this kind of like _ _ data attribute. And that's how, this is pretty much the core of d3. You take some data and then you apply it to the like DOM element, and then you access it because it's literally been bound to the element in this way.
[00:04:23] Okay.
>> Shirley Wu: Okay, so yeah, and then once you've bound that to each of the elements, you can actually use that data to kind of specify what your element should do. So, right here what's happening is now that we've bound the data, I'm telling it, hey, for each of these rectangle elements, this is what I want my x attribute to be.
[00:04:53] So what's happening here is, d3 than underneath the hood is looping through each of the SVG elements. And on each like, okay. And as it loops through each of the SVG elements it passes in the data that's been bound to that specific element as well as the index of that element and that array I showed you.
[00:05:25] And then you basically use a function to specify, like hey, this is what I want to return for this ex attribute. So for example, I'm, what I'm doing here is, I specify, I think I specify like erect with 50 pixels and I say, just use the index of that SVG element, and multiply it by 50.
[00:05:49] So then what that means is as it loops through, the rectangle elements, the bars, are laid out nicely across the screen. Yeah, question?
>> Audience 1: Yes, I have two questions.
>> Shirley Wu: Okay.
>> Audience 1: Kendall B asks, those arrow functions, will that prevent it from running on browsers without ES6 support?
[00:06:17]
>> Shirley Wu: Ooh, so this is just me being lazy. You can definitely use just like none ES6 functions and yeah, it like d3 does not require L functions. This is just me being lazy with my code and trying to conserve space, yeah [LAUGH].
>> Audience 1: That's excellent and then the second question is from lock in.
[00:06:43] What if there's more rectangle elements or if there's more data than the rectangles that you have?
>> Shirley Wu: Absolutely excellent question. We're getting there. So, I'm just giving you the most simple straight forward and then, we'll build up to it. Yes, so right now lets just only consider when data and the DOM elements are mapped one to one.
[00:07:10] So, yeah.
>> Shirley Wu: So, we were talking about looping through that each of these functions are essentially underneath the hood. Looping through each of the elements, and then [COUGH] applying the value that you basically have returned with the function that you've passed in. So to kind of drive that point home, this is a really, really tiny screen shot of the console log, and this is just basically me console logging in here.
[00:07:41] What the index is? What the data is? And basically, all of the attributes that's been bound to the SVG elements, with these outer functions. So you can see like d3 [COUGH] is looking at the first rect and then calculating x, y, width, height, and then the second, the third, fourth, and fifth, and that's how it's working under the hood.
[00:08:18]
>> Audience 1: We have [INAUDIBLE] a simply asks where is racked with set? The variable rect with?
>> Shirley Wu: I removed that from this code piece for like first six [INAUDIBLE].
>> Audience 1: Yes, sure.
>> Shirley Wu: Yeah, but this is where we get to play with the code. So that exact piece of code with a rect with is included in this block.
[00:08:51] So, let's take about five minutes to kind of play with this piece of code, change around numbers, change around the data, add or remove a rectangle if you want to, but make sure to console log all the things, and open up the arrays as you console log, and kind of dig into what's happening under the hood, so that you can get a sense.
[00:09:14] Yeah, five minutes.