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

11:46:59 Hi! Everybody! Welcome back in this video. We're gonna talk about how you can load data using d 3 dot, J.
11:47:05 S, so the first function we're gonna learn about is d 3 dot.
11:47:10 Csv, so this is a function you'd call if your data is stored within a Csv file so we'll check out.
11:47:17 Csv example in just a little bit. So with D, 3 dot Csv, you're going to load in a file name or file path.
11:47:26 So if instance ours is stored in a folder called data that will navigate to, and then put the name of the file, and that's what use for Csv Files?
11:47:36 Similarly, if you have a Json file, which is another common data storage type, you'll use d threed Json, and then the exact same way you just put the file pack so before we look at the examples, we're going to talk about another keyword which is then so following d 3 dot
11:47:54 Csv. Or d. 3. Dot Json. You then put a dot.
11:48:00 Then what this says is, d. 3 load. This data then, requ the following, and so within.
11:48:06 Then you then place a function that has a variable name for whatever you want to. Data to be called.
11:48:11 Typically it's data. And then within that function, you do whatever stuff you'd like.
11:48:17 And as a reminder, here's a slide on the function syntax for Javascript.
11:48:24 So let's go ahead and look at these examples.
11:48:26 So we're going to using loading data.
11:48:32 And what's look at the Csv example first?
11:48:37 So here you can see that we are called D 3 dot Csv.
11:48:42 We input a file name. And then we call the function. So let's go ahead.
11:48:48 And before looking at this, let's show you where the data is.
11:48:53 So there's this folder called data. And in this example, we're using sample data.
11:48:58 Dot. Csv, so I'm not gonna click on this, because if you click on it, it just downloads the Csv file, maybe we could try opening link in a new tab.
11:49:11 Yeah, so it won't show it. But is you can see it did download it.
11:49:16 So you can check out the Csv file, either by looking at it in the repository, which we could do so if we went back.
11:49:27 And saw sample data. Csv, this is what it looks like.
11:49:32 Xy. Size, color. And so then, when we call it in our function, is just going to log the data to the console so let's go back and open d 3 dot.
11:49:45 Csv.
11:49:53 Here we go. Csv example, and you can see nothing here, because we haven't appended anything.
11:49:58 But within our console we can see that the data was loaded as an array of objects, and if we, you know, we can cross-reference, you know, the first row is negative.
11:50:08 3 negative, 27, 5 in. Green. And so our first entry is negative. 3.
11:50:11 Negative, 27, 5. And if we expanded, the color would be green.
11:50:17 Okay, so it's the exact same thing for the sample.
11:50:24 Json.
11:50:29 Here we go. Lectures. What browser loading data!
11:50:37 So if we look at this within visual studio, it works exactly the same way.
11:50:42 Okay. But now, instead of a file name, I'm putting in this web address for a very popular data set.
11:50:51 So let me go ahead and place that there.
11:50:55 And so this is a data set that makes sort of a network of the different characters within the lay miserables, Novel.
11:51:04 So this will load it. Then we apply the function where we're just gonna go ahead and plot the data to the console again.
11:51:13 So you can do a cross-reference of the nodes that we see in this raw 8 Json file, and the nodes that we see here, and then, if we wanted to, we could.
11:51:25 Do you know, accessing the different parts so we could do console dot log, remember data.
11:51:31 And it senss since it's Json we could do nodes.
11:51:37 Okay. And so now it's an array with all the nodes.
11:51:42 Alright! So that's it. We now know how to load a data set that's in a Csv or a Json file.
11:51:51 There may be other forms of data that you're interested in, that with working with, in which case I'd leave it to you to do a web search, to find the proper way to load the data using D 3.
11:52:01 And then, after loading your data, we saw how you can tell d 3 dot Js, what to do with that data with a then followed by a function within the then and here again is just a reminder of Javascript functions Syndrome.