Selections

[00:00:00]
>> And let's start with D3 selections. And so that is we're going to look at select and select all. So, this right now this cell is giving us, is currently just drawing in here an SVG container and then five rectangle elements. And right now because we don't have the width and height set for each of the rectangles, nothing is showing up but that's okay for now.

[00:00:28]
Because what we want to do is we want to use D3 to select those, select the SVG, select the rectangle elements, and then seeing what a D3 selection looks like underneath the hood. So let's do this part together like you can do it, let's do it together. So what I'm gonna do is I'm also going to open up my console.

[00:01:00]
So we have in this cell some code. And so the first one is saying, let me go and select this SVG that has this id of container. So basically I'm saying, let's go select this SVG, put it into this variable and then let's console log or sorry, let's return that.

[00:01:34]
And this is what that D3 selection looks like, it has groups and then SVG, SVG element. And yeah, and then if we console log of that what we can do is take a look in the console log. And if we expand it this is really helpful. The reason why I'm showing this console log is that it's quite helpful in debugging.

[00:02:06]
And if we're kind of confused what our D3 selection is. You can console log it and then it will look like this in our console log and if we open up this underscore groups, that's our D3, that's kind of like the DOM elements that like D3 is kind of wrapping around with this selection.

[00:02:27]
So you can see actually that is the SVG container. And if we actually click on this, at least in Chrome debugger, and I think in Firefox too, it will take you directly to the element in the DOM tree. So then that I find to be really helpful with debugging.

[00:02:47]
If I'm like, why is this not happening as I expected to and so you can even kind of like open it up and see the rectangles that we've drawn. So that's the SVG. Actually now let's take a look at what happens when we chain that SVG and select the path.

[00:03:11]
Sorry, where is the path I direct this was a, I was doing something else. So I actually I'm gonna publish that. And then if you just refresh that should be the correct version and so, right now, what we want to do is dot select a rectangle. And let's take a look at what that console logs do.

[00:03:41]
So that if we open up these groups and then we see that it is one rectangle. And if we click on that rectangle, and it will highlight in the DOM that it's the first rectangle. So, dot select will grab the first element that matches this selector. And finally, with select all.

[00:04:11]
We're gonna go and select all of the rectangles in the SVG. So what that looks like is in groups it's a, an array of. The five rectangles. So if I click on any of them, it's the first one then the second one, the third one, fourth one and fifth one.

[00:04:31]
So this is what it looks like underneath the hood. And the reason why I wanted to show this is because with a D3 selection, what happens is that it has this underscore groups, which is kind of the DOM elements that D3 has selected. And then it has this set of functions, and these are actually the functions that a D3 selection supports.

[00:04:59]
So you can chain things like selecting more things. Select all being able to filter, bind data etc, so these are all of the kind of like D3 selection functions. And this is how it's letting us and you'll see in a bit that will be chaining and these D3 or actually you even you already see now that.

[00:05:23]
We're chaining like select on select, and we'll chain more things later on too. So that's what's happening here. And so these are kind of all of the selection methods, and all of them will either take in a selector string which as far as I've ever seen, works the same way as the CSS selector strings that we might be really familiar with.

[00:05:50]
Or you can pass in directly a reference to a DOM element. And either if that works and it will return a D3 selection. And the other thing to know is that the first two where it's D3 dot select, that will search through the entire DOM tree and return either the first thing that matches or everything that matches.

[00:06:14]
And the second thing, second part is that you can chain you know, a selection and then what happens there is it will be restricted to just the children of the selection that we chained upon.