Creating DOM Elements from Data

[00:00:00]
>> So let's go on to our next notebook where we create a, so right now we've only created five pedals and the next step we want to make is create a pedal for each of the 135 movies. So thus far you might have noticed that we've been binding our data to existing DOM elements and setting attributes and styles on them.

[00:00:24]
But we can't possibly go around creating SVG elements for every single data point that we might have. We're now going to copy and paste 135 path elements into our HTML document or anything. And so here's how we're going to go about it with d3 instead. So let's go back to our kind of simple data or simple bar chart that we have before and we have the same array of five numbers.

[00:00:59]
And we also have our SVG element with, rectangle width, the width is set the same way and our height and the difference is that now we don't have our five rectangle elements anymore. But, with this code, we're rendering the same exact thing. So how are we doing that?

[00:01:26]
Let's take a look. So, here are the magic lines it is select all the rectangles, bind data.enter.append rectangles. And let's break down those lines together. So let's first take a look at select all rectangles and we have this empty SVG. So if there are no rectangles elements in the SVG.

[00:01:59]
What are we even selecting? And the answer is it's an empty selection. So, then we might wonder, how are those bars appearing? And the way that they're appearing is, first that we're again, binding data. In this case, we are binding our array of five numbers to this empty selection of rectangles.

[00:02:32]
And so what d3 is doing in this .data function is that it's going ahead and calculating and figuring out that to match our data, we need to create five rectangle elements. So that's the first thing that d3 does, it says, for our data and our DOM to sync up, we need to create five rectangle elements.

[00:03:03]
And so this is what d3 returns .data, you can see that there is the groups that we've been looking at as before. But interestingly enough it is an empty selection. So it says empty x 5 and if we look now at this thing that's called _enter, and it actually has these five elements within it.

[00:03:44]
So what happens next is we call .enter and what .enter does is it basically just gonna plugs out this array of the five, essentially placeholder elements and these placeholder elements, they're not DOM elements yet. They're just placeholders but they do you have the data bound on them. And so .enter just says, okay, let me just get that we call this the enter selection all of the elements that need to be created.

[00:04:19]
We call this the enter selection. So let me get that array of all the placeholders put that out, and that's what .enter returns. So what's happening is, .enter is basically this five rectangle placeholders with the data already bound on them. So this is what .enter returns and if you look up in the _groups, it's that kind of RT, the placeholder elements that we saw earlier in, In here.

[00:04:59]
And finally, with .append, we're saying, okay, insert a rectangle element in the DOM for each of the placeholders that we have, and each of these rectangle elements also have the appropriate data bound on them. And this is what that looks like underneath groups. Finally in the groups, we have these SVG rectangle elements with the data already bound.

[00:05:29]
And so this is one of the first big I guess key concepts for d3, this kind of .data, .enter, .append, where we create DOM elements based on the data. I guess this is the the lightning bolt key concepts, the first one of the first key concepts, which is that d3 stands for data driven documents because we're letting our data drive what is created in the DOM.

[00:06:00]
This is if you take nothing away today, please take this one away. In d3, we let the data drive what's created in the DOM. And some things to look out for again, like kind of like places where I've had, bugs come up and confusion come up. So some key things to look out for when we're entering and appending.

[00:06:28]
The first is that data when we bind the data. So right here when we bind the data, the data that we pass in when we're trying to create these elements, it must be an array. It cannot be an object, it cannot be like a string or an integer.

[00:06:48]
It must be an array. And it must be an array because d3 needs to be able to know like each element in this array will get mapped to a DOM element. So it must be an array. If it's not an array d3 will like air out. So thus far we've had the select all be whatever the SVG element is, whether it's select all rectangles or select all paths.

[00:07:25]
But sometimes you want the selector in your select all to be something else because maybe in your DOM you now have multiple different kinds of paths. And some paths might be doing one thing and another set of paths might be doing another. So maybe you want to only select a subset of these paths.

[00:07:47]
And so when you want to do that you might want to select by the paths with like specific class names or rectangles, in this case, with the class name bar. So if you do that, you must make sure that the selector that you pass into selectAll matches what gets appended.

[00:08:10]
So for example, if the selector is a class name instead of that element tag, and that class name is bar, then we must append whatever we still append, whatever SVG element, in this case rectangle, but we must then follow it up with that .class bar is true. And this is a d3 function that basically sets the class name bar on our newly created rectangle elements.

[00:08:37]
So, please keep these two in mind cuz I think these two are also places where people might see bugs. So very important.