Data Binding

[00:00:00]
>> Now that we have something selected with D3, let's go ahead and bind some data to it. And so that we can kind of start drawing things with our data. So let's take this kind of random array of five numbers. And then in this cell, we've actually bound that data to our SVG to different selections.

[00:00:31]
And so, let's again together, look through the cell and try on commenting different things and see what that D3 selection looks like. And so the very first thing we'll do is we will go ahead and see. We're going to select all of the rectangles in our SVG. And we're going to call dot datum and pass in our bar data, this array of five numbers.

[00:01:08]
And so what we'll see here is that in groups, we have just that first rectangle element and then inside we'll see that this underscore data and we have the whole array bound to this one rectangle. And so when you hear someone talk about like D3 and data binding in D3, and this is what's happening under the hood, which is that D3 goes and actually creates this underscore underscore data property in the elements, in the DOM elements.

[00:01:43]
So if you take a look at, this is what you might see if you're working outside of Observable. If you are, for example, working on your own index HTML file or something and you want to be you want to debug and you console log, this is what you might see which is there's the groups and there's your first rectangle.

[00:02:10]
And then within that you'll have all of these like properties on the rectangle and if you scroll all the way to the bottom, you'll see that there is this underscore data property right here and it will have your bound data on it. So whenever you're like not sure what data has been bound to your like, particular DOM element, and this is a really great way to check.

[00:02:39]
And so another way if you don't want to console log in your code is if you like, select and if you select the element that you want to inspect and I think it's console dot direct, yeah, dir dollar sign zero and that will give you the DOM element.

[00:03:06]
Or kind of the properties for the DOM element that you highlighted and so you can see it, you can potentially inspect it that way also. So that's what dot datum looks like. Now let's take a look at if we selected, oops. If we selected all of the rectangles in our SVG, and bound our array of five numbers, let's see what happens if we call it dot datum.

[00:03:47]
Here we have our five rectangle elements. And you can see that we have the same array of five numbers bound on every single one of them. And finally, let's take a look at what if we selected all the rectangles and call it dot data on it. Then what we get is in groups, we still get that array of five rectangle elements.

[00:04:17]
But now, noticed that the difference is, instead of each of these rectangle elements having the array of five numbers they each have one element of the data array. So each rectangle now has one value of the data array. So the first one has 45, the second one has 67, and so on.

[00:04:43]
So if we want to illustrate what's going on here, for dot datum if we select just one dot datum, we are basically binding the whole data onto one of them. If we select all the rectangles and do dot datum, we are binding the whole data array to all of them.

[00:05:06]
And finally, if we select all the rectangles and called dot data, we are binding the individual data elements to the individual rectangle elements.