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

11:54:27 Hi! Everybody! Welcome back in this video. We're gonna start learning about how we can use the data within our data sets along with D, 3 dot, js, to start making visualization start adding data real data to the to our HTML, documents so D Threej S Loops, through data, so what does that
11:54:47 mean. So whenever we run dot data, dot answer, d. 3 is going to loop through all of the data elements.
11:54:54 So each time through the loop. Let's say there's 10 rows for each of those 10 rows.
11:55:00 Whatever code follows, the dot enter will be run. So if each time through, I want to add a circle from that row, that circle will get added.
11:55:09 So I. We talked about high in a previous video, a little bit of how to set attributes using data.
11:55:15 So if data is an array, the attributes of the elements can be set using functions so like, if our array, it's like a row of objects, or it's just a single simple array.
11:55:28 We could do select body data, enter a pen P, and then, like function of D, return, d.
11:55:34 So here d. Will refer to whatever that right or entry of the array is.
11:55:41 So, if our entry was a list 1, 2, 3, 4, 5 d.
11:55:44 Would be one the first time through to the second time through 3, the third time through, and so forth.
11:55:51 If your day data is in our array of objects, you can then use that to your advantage.
11:55:56 Remember object notation. We can do object, name, which would be d here, dot property name, which in this example is X.
11:56:08 So d 3 also, maybe what makes sense is to look at the code first.
11:56:12 So let's go ahead and go to using data as our HTML code.
11:56:20 Okay. So here, I've got 3 divs, and within those divs, I'm going to add various amounts of data.
11:56:28 So here's the first example where I have my array.
11:56:31 Data. And in this first example, I'm selecting the first div, I'm selecting all the Ps within that div, I'm getting the data.
11:56:42 And so each time through, I'm going to append to P.
11:56:46 That within that P is going to be the text data value and then, if you want to concaten strings, you do dot comcast.
11:56:56 D, okay, so what this is saying is each time through this array, I want you to add a paragraph whose text says, data value.
11:57:05 And then, whatever the D is. So if we can, let's comment out this, these 2 save it, and then we can go and check out using data.
11:57:20 Expected expression got.
11:57:28 There we go!
11:57:30 There we go. Sorry there is just a little bit. So this is what the results of that is, and you can see that each time through it takes the data value and prints it.
11:57:40 So now we're adding elements where the data actually impacts the element.
11:57:46 So that is an example. Do we have another example? Yes, so here we've got another.
11:57:54 And if let me comment out this bottom one, there we go!
11:57:59 So here I'm loading the data that was in sample data.
11:58:01 And I'm appending the text to just be the value of the X component of that data.
11:58:09 And then I'm changing the color of the text to be, whatever the color value is.
11:58:14 So remember, in this example, we can do a quick comment, and then just log what the data is.
11:58:22 So we can remind ourselves so console log data.
11:58:29 Okay. And remember our data here. Each row has Xy size and color.
11:58:35 And so what I'm doing is in this example for each row of the array, or for each element of the array.
11:58:42 I'm going to set the text to contain the X value, and then set the color of the text according to the color value.
11:58:50 And so that's what's going on here.
11:58:54 Okay. And now that it's uncommon, we can see this in action.
11:58:59 Alright, and then we can go through and check. Well, the first x should be negative 3, and the color was green why don't we go down to the third row, or the fourth row?
11:59:10 Technically, the color is blue, and then the x is 0.
11:59:15 And so there we go. Okay. Now, the next part, in addition to allowing you to set attributes using the data. D. 3.
11:59:23 As it's looping through the rows of the data set are, also keeps track of the row. Number.
11:59:29 So you can access this access. This by including an I in the function call.
11:59:35 So in this example. And my text function, it's gonna have both a D which stands for the row of the data set.
11:59:42 The elements of the array, and an I which will return whatever number of the loop it's on.
11:59:48 So the first time through it will return a 0 s time through it would return a one third time through it would return a 2, and so forth.
11:59:56 And so let's see the example. With that I will.
11:59:59 Uncons here!
12:00:03 Incidentally, you can see each time through after the enter.
12:00:08 I'm going to append a paragraph and then set the text to be D comma.
12:00:13 I. And so it's just gonna say the word row number with a concatting of the eye.
12:00:19 Okay. So now, that's uncommon. We can see row number 0 row number one.
12:00:24 We're row. Number 2, row, number 3. All the way to row number 6, and remember, Java script starts indexing at 0.
12:00:32 Okay. So now we've seen how you can actually access the data to set.
12:00:37 HTML elements. How you'd like we did this with paragraphs, and this example are these 3 examples, and the next notebook, we'll see how we can use this are the next not notebook.
12:00:48 But the next slides next video we'll see that how you can use this to add circles to create as scatter chart.