Binding Data Video Lecture Transcript
This transcript was automatically generated by Zoom, so there may be discrepancies between the video and the text.

11:36:14 That functions. Work is through chaining. And so it's called chaining, because, as we see in this example, one function is followed immediately by a call to the next function, which is followed immediately by a call to the following function, with these just doing a series of periods so for instance, we're gonna learn something about selects and a
11:36:35 little bit, but you do d 3 dot function dot function dot function.
11:36:42 And so this is called a chain that chain goes like dot select chaining, then to aend chaining, then to text.
11:36:49 So this is how d 3 dot. Js functions work, and how a number of other Javascript libraries functions work as well.
11:36:56 So d 3 dot select can allows us to select an HTML element, using the either the properties or sorry.
11:37:07 Not the property, either the elements, name, or the class of an element, or the id of an element.
11:37:14 So just as I've said. If you want to do a particular element, you could do d.
11:37:18 3. Dot. Select a body. If you wanted to do a particular class, you could do d. 3.
11:37:22 Select period, followed by the name of the class if you wanted to do a particular id you do d 3 dot select hashtag, symbol, pound symbol, whatever you wanna call it.
11:37:35 The id name and so let's go ahead and open up this code and start with.
11:37:42 I believe we wanna start with select append?
11:37:46 So here we can see what this is going to do is it selects the body, and then appends a P.
11:37:55 And then within that piece, we set the text. Okay, so let's go ahead and open this.
11:38:08 Okay. So you don't see anything happen, because all of this code runs before we're visually able to see the code executing. It's that quick.
11:38:17 But now what was a blank? HTML document now has this P. On it?
11:38:24 This paragraph on it that has the Hello. Their text.
11:38:27 And so, if we were to comment this out.
11:38:31 We can see how now it is an empty document, but once we uncommon it, we have appended a paragraph to the body another way that people will do this, and what we'll see in a little bit is you do select all, and even though there are no pl elements within the H.
11:38:54 Tml document. It's still will run and then work.
11:38:58 Exactly the same way. Well, apparently not. I like, I think that's because we're missing a a data element.
11:39:07 So ignore me for a second. We'll get rid of this and come back to it. In the next code element or code example, we show.
11:39:15 Okay. So select all. As I was saying, works exactly like select.
11:39:20 It'll select every instance of the desired element, class or id, instead of the last one added to the web page, and so let's see an example of that by talking about the we talked about append.
11:39:32 Let's see an example of select all when we talk about the data.
11:39:39 Okay. So oh, and here's a slight typo. Let's fix this.
11:39:43 It shouldn't be hashtag body. It should just be body sorry about that.
11:39:47 Okay. So when you are done with the select and the append, you will then in between select and append.
11:39:59 If you wanna bind data which allows you to take data and then use it to append elements to the HTML, you call data, whatever variable your data is stored in, followed by the chain function, enter.
11:40:15 And then after that you'll then do your appending.
11:40:17 So the data and enter statements come always between your select or select all and your appending statement.
11:40:26 So what this does is this says data says, look at all of the entries within this data set.
11:40:34 And then enter says, for each entry in this data set, append whatever I say. Next.
11:40:41 So in this example it will append Ap. After you're append.
11:40:47 You can then go through and change various attributes that you'd want for the elements. If it's a style attribute like a Css.
11:40:54 Attribute you'd use style if it's a different type of attribute that's not directly related to Css.
11:41:00 You can use at Tr. So why don't we go ahead and see an example in the code?
11:41:10 So I've now opened up this file, binding underscore data.
11:41:15 So I've defined up top this data array.
11:41:19 Maybe make my code a little bigger. So it's 1, 2, 3, 4, 5, 6, 7, 8, so it's just an array.
11:41:24 That's 8 elements long. And so this will work through I was trying to say earlier, so what you typically do is you'll select whatever holding elements.
11:41:34 So for us in this example we will be a body. But in other examples it will be an Svg.
11:41:39 Then you say, select all whatever you're trying to add.
11:41:43 So for us. It will be in this example a paragraph elements so select all P.
11:41:49 Then you put your data, which, remember, my data is stored in a variable data.
11:41:52 One, then you call. Enter, then, in this example, we're just going to append a bunch of P elements that have a hello there text and a color that is red.
11:42:09 What happened? By doing d 3 dot select all P. Okay.
11:42:15 So let's go back and go back to binding data. Here.
11:42:18 So now you can see I have all these Hello, there! And if you count them up there should be 812-34-5678.
11:42:28 Okay. And you can see. Remember, I said I was going to do d 3 dot select all P.
11:42:34 And we can see what that gave us is this output here?
11:42:38 And so what it returned. Right was an object, and within that object we have groups, which is our nodes.
11:42:45 Which are these 4 p. Which you can see is bound to the data with this data part so here you can see the data, Colon, one.
11:42:54 That means that this first P. Was bound to this first entry of the array.
11:43:01 And this second P. Was bound to the second element of the array, or the elements in the one position.
11:43:08 If you'd like, and if you go down all the way through you'll see all these peas, all these paragraphs are bound to the corresponding entries of the data.
11:43:18 One array. So that's what we mean when we say binding the data so when we append things in this way, we're going to be binding the new HTML elements to the corresponding entry of the array or object or Json whatever okay, so
11:43:36 that is, gonna be it for this video. We've now seen how to bind data to add some paragraphs to an empty HTML file.
11:43:47 We learned about how d. Threej. S. Works in the form of chains by having one function come after another, separated by periods.
11:43:57 We learned about data and enter as well as select and append.
11:44:01 So, in the next video, we'll take a brief aside to show you how you can use D.
11:44:06 3 dot Js, to load data which is going to be useful for making data visualizations.