Thanks so much for coming out today.

I'm gonna walk you guys through.

Ah, quick exercise with the three.

D three is a Java script library.

So it isn't a language itself.

It's actually using native javascript.

It was all built by one human being.

He's a very cool guy who was really good at this.

And his whole idea was that he wanted to put together a library that would, in relatively few lines of code, give you the ability to make really interesting, interactive and adaptable data visualizations.

So a lot of what we're going to be dealing with today is, um, what it's like to load in data what it's like to do that synchronous levers is a synchronously.

And then we're going to build pretty simple bar graph here, where we're gonna have some clicking capability, and all of this is being generated dynamically.

So I'm gonna step you guys through the code, so you have an idea of what this looks like.

Um, feel free to stop me at any point.

But a few things that I do want to mention right off the bat is that in order to get any of this to work, you are gonna need a Web server up and running.

So just keep that in mind.

The whole reason that any of this is running is because I have a terminal window here where I've already, like, typed in http server and this is all running.

Um, good to go before before I start looking a code.

Awesome.

Great.

So first thing first is we're gonna talk about index dot html.

You don't have to do this and index dot html.

Since this is a pretty simple website with only one page, I decided to put it in Index.

But you could, of course, have data visualizations on any of your websites pages.

So we're gonna have some typical boilerplate code here where we see things like the meta char set, the meta names the title.

And then immediately I start, including things like bootstrap CSS, which I use a little bit of, Um, here I've made une p I call to Google to get some fancy fonts.

This is absolutely not d three related, and then I've included some of my own style sheets.

These air normal things you can do.

You don't have to do have absolutely nothing to do with D three itself.

It's more the stuff that we do in the body and that we included the bottom of the body.

That is actually D three specific where even here, I've just sort of configured the page so that I have a differ, my header.

And then I have a div where most of my visualizations and most of the interesting components of this page or going to exist.

So let's talk about that a little bit.

I'm using the bootstrap container class here, which basically lets me resize is I would like to.

So if you ever, like, click and drag the, um, the Web page, your data visualizations will resize accordingly, so you don't end up with things that are like awkwardly cut off, for that starts to look a little bit weird.

This is more of an aesthetic choice, as opposed to a functional choice, but it ends up being a nice way to do this on dhe when you're using anything within the container, the next class that you have to have his row.

If you're ever interested in looking any of this up, you can Google bootstrap grid layout and you'll immediately get documentation for this.

Um and what's important to know about the grid layout is that the Web page is split into 12 columns, so you'll see here that I actually have to dibs each taking up six columns.

Um, this is really just so that I could get a nice effect of splitting the page in half between the data visualization itself on any of the information that I was going to show.

You could absolutely configure this differently.

You could have your data visualization take up the entire width of the screen.

You could have a take up considerably less of the screen.

But for my purposes, this is what I what I wanted to dio and what I really want to point out is that I have made very judicious use of ideas here, where within d three, we're going to have the capability to similar to native JavaScript actually select components out of the Dom out of the document object model.

And the easiest way to do that is in fact, to do it by I d.

So get very accustomed to using ideas and try to keep in mind that the ideas that you use should be descriptive enough that you know, you either don't forget them or when you're actually writing your Java script.

It's easy enough to know what you're actually referring to within the HTML itself.

So you'll notice here.

I actually have two columns that are happening.

One where I've said Okay, I'm gonna actually display the chart and one where I'm going to display the information on within the information.

I said, okay, I'm gonna have a header, and then I have this other div that I have said is going to be albums.

The other really important thing here that is now actually D three specific is that I need to be sure to include the D three Java script library if I don't include this.

We literally aren't working with D three at this point.

In order to find this file, you can literally just Google d three JavaScript and you will find a link in order to include it in a script tag.

I always highly recommend whenever you can, following that link that you would otherwise just include, and actually copying and pasting all of that source code into a file because that way.

You never have to deal with lead and see if your connection is slow.

And now you're JavaScript.

Libraries aren't running.

So in fact, this file exists natively within my directory here so that I don't have to deal with any of these issues of, you know, poor connection on.

Now my visualizations aren't running and you know, of course I have my bootstrap Js.

I'm gonna use a little bit of Jake weary, which I think you all saw in one of the most recent P sets.

I'll point it out, but it's really a very small use.

And then finally, I'm going to use Q, which is just another job script library.

And the whole purpose of this is to make sure that my data gets loaded properly.

So having looked now at the Java script itself, I've also included one more JavaScript file, which is the file that I have actually written and where any of the logic that I have done for my project will actually exist for your projects.

They might be a little more complicated where in fact, you might have several JavaScript files that are all interacting with each other.

Always be sure that you're including your JavaScript files.

Um, it's one of my favorite debugging stories where I'm like Well, I've written all of this code.

Nothing is working.

Nothing is showing up.

Why isn't it showing up?

And it's because I've forgotten to include the file.

So it's always good to keep this mental checklist of, like, how I included the files that I need to include.

So if we hop over to main dot Js, first thing I really want to talk about is this idea of asynchronous javascript loading where in fact, I'm going to be loading data sets that again exist natively on my computer.

Um, and just to give you guys a quick idea of what those look like Oh, goodness.

Well, here, we can actually open them up over here.

So, you see, I have two data sets here.

I'm just gonna go ahead and open the artist's data set.

So all of this code are all of the state or rather is coming out of the sequel.

Lecture s so some of it should look vaguely familiar because it came out of the sequel lecture.

I actually ended up having to treat my data a little bit differently to make things line up properly.

You'll remember that in the sequel lecture, David was talking about ways to make your database more efficient on, and as a result, rather than store an artist name, he would instead you store in interview representing an artist I d which is a perfectly valid way to do this on.

It was actually a very good opportunity for me to show you guys how to use multiple data sets that actually perhaps interact with each other.

But this is just one of the two data sets.

You'll notice that I've saved it in a C S V format.

Um, this was out of convenience more than anything you could absolutely separate.

Save it as a like tab.

Separated values, which is similar to A C S V but uses tabs, is the limiters.

Just be consistent with what you're using.

And keep in mind that whatever type you used to save your data is going to correspond directly to the methods that you're going to be using to actually load that data.

So if we look at this step here, this is probably one of the most important steps that we're going to have Where, In essence, I've said Okay.

For each one of these data sets, I want you to call d three dot c s V on it.

What d three dot c s v actually does is it calls a method that literally reads in your C S V and saves it as Honore of JavaScript objects where each one of the objects And I'll show this to you in the developer tools in chrome in a second.

But each one of the objects is going to have a key that is artist I D.

And a key that is artist.

And so each one of these lines here is going to turn into its own JavaScript object.

So that's kind of the direct, um, the direct mapping that's happening there.

So I said, OK for each data set, Please load it in.

And it's kind of this differ.

That is most interesting where we've said once you load this one in wait to do anything else, but please also load in the next one.

And finally, this await line is the most important.

Where we've said Okay, once both of these differ statements are done meaning once you've loaded in both of those data sets.

Now please call this other function.

And what ends up happening here is this was just a function that I wrote you could have done.

This is an anonymous function, but it would start to get pretty ugly pretty quickly.

And so I went ahead and just gave it a name for simplicity's sake.

But what Q ends up doing and Q is coming out of this huge Java script library, it says, Okay, whatever function you pass to await needs to take at least one argument, but it's going to be one plus, however many differs you have.

So you'll notice here that artists dot C S V is going to immediately give US artists data.

I could have called this whatever I wanted.

I could have called it food.

I could have called it Lama.

Um, it's just most convenient here to call it artist data so that it is clear what I'm actually loaded in.

And here I've called this alb data because I was lazy and didn't want to type album.

But I could have easily done that.

The order here matters right.

The second differ is going to ah correspond to this third argument here.

This first error is an error that potentially might be thrown by either one of these two functions.

Right.

Either one of these two calls to D three dot CSP.

If, for example, something was wrong in opening your CSS file or if it wasn't able to get through the whole file, it will actually return an error.

And so the first thing you want to do is make sure that you have actually checked the error.

If that error exists, we're gonna go ahead and return as opposed to just console log.

We're returning here so that the entire program does not continue running.

But we're gonna constant log the error so that we as developers can try to troubleshoot exactly what happened.

But assuming that that didn't happen, let's step through the rest of the code.

So the first thing I said is Okay, I, um I'm immediately.

I'm going to have a problem because my data sets don't make a lot of sense on, in fact, what I'm going to do here as I'm going to go ahead and comment in this consul log which is going to show us everything that's in album data, and I'm going to go ahead and put in another consul log, which is going to show us herd ist data artist.

This is a cute trick.

This is the print ft bugging of Java script.

I highly recommend using it.

Um, nothing is more frustrating than not knowing what your data looks like because it's hard to make logic to manipulate your data.

So the first thing I always like to dio is actually figure out.

What does my data look like?

So I always Consul log my data as soon as I've loaded it in.

So, in fact, if I save this and make sure that my server is still running, I go back over here, refresh this page and then I'm going to go ahead on hope that the Internet is working and in fact, you see right away that I have an error.

So this is why the council is super helpful.

Um, first things first is just understanding how to read what the Consul errors are telling you.

You'll see here the line where the error occurred, So I I know I should be looking at main Js lying 22 where it has said to me, Okay, you've referred to something called album data and it's not defined.

So in fact, if I go back to Line 22 I can immediately say Oh yeah, I didn't call it album data.

I called it, helped data, right?

I could go back, save it, refresh the page again and you'll notice that if you have no errors, things will look good.

If you have errors, things will not load.

So this is always a good thing to do.

So these two things here are actually coming immediately out of those consul log statements that I did, and in fact, let me make this a little bit bigger for us.

So album data we see that it has 347 items.

Remember, I mentioned that it was an array of JavaScript objects.

One way you can immediately see that is that this first bracket here is in fact, a square bracket rate.

This tells me that it's an array similar to an array in python or listing python or in a rain.

See if you click this little drop down arrow.

It does this nice thing where it's segments it for you because otherwise it gets kind of impossible to read and to see you can drop down again and you can immediately see OK, this is what my data looks like.

Great.

Each one of these objects has this album I D Key and has this title key has this artist I d key.

All right, this will be good for me to know, as I'm writing loops to liberate through this data.

By the same token, I can look at the artist data and I can say, OK, artist data all has an i.

D.

And it has an artist that it corresponds to.

I happen to know from the data that I loaded in that an artist idea of one here corresponds to a same artist.