One of the most important thing that we have to do in order to create our visualization is actually load the data that we want to visualize. You don't want to write your hard code, your data on your JavaScript file because, then, it's really hard to update once get a new data, once your data changes, and in some cases you actually have a server somewhere that's giving you this data. So you want your application to load this data from somewhere and then create the visualization. So, that's what we want to do in this video. In order to do that, d3 gives us a set of APIs that allow us to load different formats. So, for example here, what I want to load is my file. There is a CSV file that contains information about the weight and the height of the different people. So, we have a table and a CSV file is basically a file where you have each value separated by commas and each line is a row or a point on your dataset, and in this case each line is a person with their information. So now, what we want to do is to load this data into our JavaScript so we can actually start to create our visualization. In order to do that, the first thing is we already load d3 here, and because we want to use d3 to load this data. We also have a container, so we basically selected a div that we have in our page so we can add elements to just div. We also created a write function. So, this write function does a simple thing. You just add the div to the container with the information that I provided. It's just to provide a easier way to write to the screen a list of information. So, our next step is load the data. How we can do that we do d3.csv, and the next thing is the name of my file. So, if my file is in another server, I can give the URL to the file. Here the fire was in the same server, so I can just give the name. So, let's do data.csv, this is the name of my file. Then after that, I'm going to do.then(), and this function is going to run after my data is available. So, remember that the data is not available immediately. So, it's going to take a little bit to the data to be available, so you have to provide a callback, a function that d3 is going to call once the data is available, and that is why we have to write a function inside this damn thing. So, we create a function and you see that this function has no name, is what we call an anonymous function. Then we're going to see that the data is going to come inside this function. So finally here, we're going to write ''Data is available'' because this only happens when the data is ready. Here we're going to write ''Line after'' because this is my line right after I call my data. S, o if I save that, you see that the order that I write is inverted. So, even though data is available happens first heating the code, this line is written first, because this line is going to wait d3 to go to the server, get the data and then it's going to be reading the screen. So, that's what you have to keep in mind. You cannot use the data right here, you have to use that inside the function that you're going to call once the data is available. So now that my data is available, I can just look at the data. I can just use my for() loop of my data and we're going to write this using our write() function. So you're going to do write and you're going to do Client.Name. So you see that even though what we are loading is a CSV file, what happens is that d3 converted this CSV file in the same object that we have been working before, that is basically we can do object.the name of the field that we want to look, in this case it's name, and we're going to get the information. Then we were able to load all the clients in my data. Another thing that is important is note that I used the different for here. So, this for also works for enlist. So, instead of creating a variable to count, you can do for (let something of a list), and the for is going to iterate over each element of the list. It's just a short hand, should not have to create all those variables that we usually create. If you want to load a different type of data, so imagine that you have a JSON, you can just replace csv here by json, or if you have a tab delimited file you can just use tsv and so on. You can even load simple text, if you need. If it's in a different server, you just have to provide the URL for the server here. So, remember when you load the data, you have to wait the data to be ready in order to work with the data. Once the data is ready, the system's going to call function. This function can be an anonymous function, like this one, or you can actually write a separate function and just ask d3 to call that function once the data is available, and then you render your data on the screen. But, you have to keep in mind that is a synchronous. You cannot just write things here that's going to use this data because the data won't be available at this time.
