Let's review what we did in the previous video.
So this video is entirely dependent.
This is part two of graphing a CSV data file.
So in the previous video, we went
and got global world temperatures, average world
temperature, from 1880 to present.
We got that as a CSV comma-separated values
file from NASA.
We parsed it using some simple string passing techniques
with the split function.
Now we'd able to console log that data.
But instead of console logging that data, I want to graph it.
There are so many different approaches we could take.
There are many JavaScript libraries for making charts.
Probably one of most famous ones is D3, a data visualization
library for JavaScript.
We could also draw our own chart just by using HTML 5 Canvas
and drawing functions, or using something
like p5 js, which is a creative coding JavaScript
library that I use a ton to draw all sorts of kinds
of interactive animations.
And I could draw something based on the data there.
But I want to show you just kind of what might be the quickest
path right now to going from data to chart in the browser.
And so a simple tool, a Javascript library
for doing this, is Chart.js.
Chart.js is a library you can import
right there into your client side JavaScript.
With creating a chart object, you can just configure it,
you can give it the data, give it some colors,
tell it whether you want a line or a bar chart, and poof,
you'll see the chart on the web page in a canvas.
So I'm going to show you step by step how to import the library,
add a canvas, draw the chart, and then draw
the chart using your own data.
So here we are the Chart.js website.
There's a lot of examples, a lot of documentation
in the source code on GitHub.
I encourage you to check out more about the JavaScript
library.
I'm going to move to this Get Started page, which
will give me the basic techniques for using Chart.js.
So, first thing is, how do I even import the library?
And this is crucial.
I'm going to use a Chart.js CDN.
So CDN stands for content delivery network,
meaning I'm going to load the library via URL
that's hosted somewhere on the internet.
So let's click on this and see where that takes us.
It takes us to js Deliver.
Then all I need to do is go down here.
We can see this is the most recent version, 2.8.0,
of the library.
If I click on this, it's going to up a new web page.
And, look that's actually-- that's the JavaScript
library, all the code for the JavaScript library itself.
It's actually a bit minnifield, meaning
the raw source of the library has
line breaks and big variable names
and all that kind of stuff.
But all I need is this URL right here.
I'm going to go back into my code,
I'm going to go into the header, and I'm going to say script,
I'm going to say source equals.
And what I want is the URL to the JavaScript library
is, Chart.js.
Now I'm going to paste that right in,
as soon as I close this.
Visual Studio Code is doing a nice thing for me.
It's closing the script tag automatically,
but otherwise you would have to type that in.
So open script tag, source equals this and the URL
and then close script tag.
So now I have Chart.js loaded.
The next thing I need is, I need to have
a canvas in my HTML itself.
So I need to add a canvas element.
I'm going to give it an ID, like chart.
And I think I also need to give it a width.
Let's just try 400.
And a height, 400.
And those should be in quotes.
Thank you Visual Studio Code for correcting me when I hit save.
So there you go.
So you can now see I've added a canvas.
I gave it an ID.
And I gave it a width and height.
So somehow I need to tell this data to graph itself
on that canvas.
Let's go back to that Getting Started page.
And, look, it's given us some code here.
This is code for some sort of bar chart with some data.
So one way that we could actually
start working with this is, let's just copy, paste,
and take this code.
So when you're working with a new library,
you can try a variety of things.
You could read through the documentation,
you could find an example.
For me this getting started example is going
to be perfect to work with.
So I'm just going to take this, I'm going to copy it,
and I'm going to paste it here at the top of my script tag.
OK.
So there it is.
So in theory, when I refresh the page, I should see a chart.
No.
What happened?
So we've now encountered something
that has to do with the asynchronous events that happen
when you load a web page.
So it's saying, cannot read property.
Get context of null at index 13.
Let's go to index line 13.
Document-- oh, OK.
Actually this is a different problem.
I didn't name my canvas my chart, I named it chart.
So let's see if this fixes the error.
There is a different error that I thought was happening,
but this is clearly an error.
The ID of my chart is just chart, not my chart.
Oh, there it is.
So look, there's the chart.
Beautiful.
So I have this chart, it's counting
votes for different colors, it's got a scale
on the y-axis, a scale on the x-axis,
and I see my data console log.
How do I get my data onto the chart?
Well, let's look at the code and see
if we can just do some detective work and figure it out.
And if we get stuck, we can refer
to the Chart.js documentation.
So we can see here, label.
Well, the label that I want is global average temperature.
And again, I might need to be a bit more
thoughtful about the accuracy of that statement.
What is it truly, if I look at the NASA data set,
but global average temperature will do for now.
So let's just change that.
And we can say, look, it's showing us
the global average temperature.
But these labels, red, blue, yellow,
where did those come from?
Those are here labels.
So I don't want these labels.
What I want are the years to be the labels, the years that I'm
parsing to be the labels that go across the x-axis.
So what if I were to say--
first of all, this example is using older JavaScript syntax.
By the time you're watching this is probably
something different.
But I'm going to say instead const, instead of var.
And I'm going to say const here, instead of var, just
to update my variable declarations.
If you're wondering what const is,
I have some other videos about that.
Then I am going to create another variable.
I'm going to call it xlabels, for the x-axis,
and set it equal to a blank array.
And I'm going to put that variable referenced here.
So the actual labels of my chart are pointing
to an array called xlabels.
And there's no reason why I couldn't,
as I'm reading each year, just add each year to that array
xlabels.
So now I have my data parsing, I have my chart creation.
So what I want to do is parse all the data
and start adding the labels to the chart that's
being drawn on the canvas.
Let's see what happens there.
OK.
I don't see any labels.
Now, I have the other problem that I
was thinking would happen, which is
I am making the chart first and then loading the data.
So this is a problem.
Weirdly, by the way, if I just kind of like resize the window,
suddenly the data appears.
But it should appear when I first load the page.
So I've got to do this in a different order.
I have this getData function that gets the data that
asynchronously using await fetch, await response .text.
What I want to do now, then, is go up
and put this creation of the chart into a separate function.
So I'm going to say function chartIt and all of that's
going to be in a function.
Now, that this example that was provided
on the Chart.js Getting Started page
has a lot of really useful, but for me right now,
extra stuff in it.
So there are a lot of configuration options, how
you can have the chart appear.
I'm actually going to just remove those right now.
As an exercise for you, that I'll suggest for you at the end
is, maybe find different ways of drawing the chart by looking up
in the documentation.
And then also I'm just going to stick with one color.
So I'm going to take all of that out right now.
I probably could take out the color entirely.
I'm going to hit save.
So you can see, at least now in my chartIt function
there is a little bit less stuff going on.
So now I could call this chartIt function.
And if we go back, this is the same thing.
I've got the same problem, but xlabels is not defined.
So I somehow-- the xlabels variable
needs to be a global variable.
I actually don't like something about what I'm doing here,
so I'm going to do some refactoring as we
get to the end to clean up how I'm
going to communicate between getting the data
and drawing the chart.
But for right now, I'm going to make xlabels a global variable.
I'm going to call the chartIt function,
and call the getData function.
Still the same problem.
Well you would think, OK, what if I call getData
before chartIt.
Still the same problem because remember getData
is asynchronous.
So the solution that I want employ here
is make chartIt an asynchronous function.
And then actually call getData at the beginning of it.
So if I say, await getData, now chartIt
is going to wait till the data is done before it
does the rest of this stuff.
And if we go back, we can see, there we go.
You can see all those labels are applied there.
Now this is not real data.
This is still the data that's right here.
So what I want to do now is let me do constant ytemps.
So this is the temperatures for the y-axis.
And then I'm going to say under data,
I'm going to say ytemps, instead of that dummy data.
And then here, when I'm reading each temperature,
I'm going to say ytemps.pushtemp.
temp
So now let's take a look at this.
There we go.
Now we see the global temperature
from 1880 all the way to 2018.
Now what's going on here?
Negative 0.2, 0.
What are these temperatures?
Remember, these are the difference
from the global mean between the period of 1951 and 1980.
And that global mean can be found on this web page.
Here it is, 14 degrees Celsius.
So if I wanted to be accurate about what I'm doing here.
I'm going to say--
I want the temperature to be temp + 14.
Right?
I just want to add 14 Celsius.
I think this is going to cause a problem.
Let's see what happens here.
Let's go back to my graph.
I don't see anything different here.
pushtemp + 14.
Well, I think what's going on here, if I'm right,
we'll find out the second, is that anytime
you're doing parsing from a text file, your stuff is still text.
It's a string.
It doesn't know how to add 14 to a string.
I can actually use a function called parseFloat,
which is a global JavaScript function that's available
that takes a string and turns it into a number.
So now I can actually add the number 14
to the number of temp.
So now we should see, there we go.
We can see this is the actual average temperature from 1880
to 2018.
This is a bar chart.
I don't think the bar chart is the best way to describe this.
it does look kind of funny to me that this one
is colored differently.
I think that's because I removed the color thing.
So let's see if we can fix that.
So I have a feeling that if I get rid of the--
I'm just guessing, but I have a feeling
the Chart.js works if I get rid of the color as an array.
Yes.
It applies the color to everything.
And then I can also change this from type to bar to line.
And there we go.
Now, I don't necessarily want the fill below it.
This is a good example of where I
need to look up in the documentation
because I have no idea how to turn
the fill below the line off.
That's probably some parameter that
either goes in options or with the data set.
Let's see if I can find that on the Chart.js website.
Here along the side is all of the different things.
I imagine if I go into line--
it's showing me line, example usage,
data set properties, fill.
There we go.
Fill.
These are all these different things I could try.
Fill, Boolean, or string.
Default is true.
So I think that means if I add fill:
false here, as another option in the data sets object.
Then if I go back here.
We can say, yes, no more fill.
That looks great.
I probably want to think about what this label is
to be more accurate.
This is pretty important.
So how about I say exactly what the data is.
So here's the exact data I got.
the Zonal Annual Means, the Combined Land Service Air
and Sea Water Surface Temperature.
So land ocean temperature index.
Let's change the label to this, in Celsius.
And then I have to type that degree symbols.
Does anybody know how to type the degree symbol?
Apparently its option, shift, 8 to type the degree symbol.
I have not actually tried this.
Let's see if it works.
Yes.
There we go.
We've got Celsius.
And let me go back and we can see.
There we go.
So now I have my label up there.
What I want to do-- let me refactor
this code a little bit.
So I don't really love the use of these global variables here.
I think what would make more sense--
and there's so many different ways we could do this,
but let me just do one way to make it a little simpler.
Let me actually have a local variable here.
I'm going to call these X's and Y's.
And then I'm just going to push the X's here, push the Y's
here.
And then, when this is done, I'm going
to return an object with X's and Y's in it.
So the getData function is actually
going to return an object with both of those arrays.
And so then what I can say here is I can say,
data equals await getData.
And then, here, under labels, I want data xs.
And here under the data set, I want data ys.
So, again, I'm not sure this is the best solution.
But at least now the chartIt function and the getData
function kind of operate independently
without sort of sharing a global variable, which
could cause some problems later down the road.
And we can see this still works just fine.
It might be nice to also just add the degree symbol here.
I have no idea if that's possible.
It's making these labels automatically.
So looking again at the documentation--
and I did just take a little break to find this in advance.
But under here, under axes, under labeling
is what I want to do.
I want to change the way the labeling of the y-axis works.
So if I click here, we can see there are--
we can see these are all the possibilities.
But actually this is what I want, custom tick format.
So each one of these labels on the left is a tick.
Like tick, tick, tick, tick, tick, tick, like that.
And so what I want to do is I need to add these options back.
This is something I removed earlier.
So let me add the options back.
Under y-axes, under ticks, this is a callback function.
This is kind of crazy.
So this is an example for including a dollar sign.
It's basically saying, here's a function
that defines how to label the y-axis.
Take the value and turn it into dollar sign plus the value.
So what I want to do is, take the value
and turn it into value + degrees.
And I want to get rid of this comment.
And now I have that configured as part of my chart.
And here we are.
Look, there you go.
Now you can see the degree symbol is there.
So let me just spread this back out again.
I feel like this whole the canvas size is weird.
So I'm going to make this like 800 by 400.
There we go.
Then I'm going to get rid of the console.
And, voila!
We have our finished chart that shows the combined land
surface air and sea surface water temperature in Celsius,
average, from 1880 all the way 2018.
And you can see here, by the way, some very, very s evidence
that the Earth is warming.
The average temperature, over time, since 1880 to now,
is going up.
To recap, we have seen how to load
tabular data in the form of a comma-separated values file.
We've seen a little bit about how
to parse that file manually.
Although, ultimately, we might want
to use a parsing engine that's going
to be able to handle all sorts of errors or things
that might come up.
Once we have that data, we've seen
how to repackage that data for a different library
to use it, in this case, Chart.js,
to apply a chart with that data to the canvas.
And we've seen how to adjust a little bit
of the sort of styles and layout and format of that chart.
So what should you do here?
So you have a couple of different options.
One exercise is just do exactly the same thing
as I have here, but do it with your own data.
What's some CSV data that you can find?
Another thing that might be fun to try
is, go and get p5.js js library.
Could you draw your own line graph
without Chart.js, but using this raw drawing
functionality of p5.js?
I will include a solution to that
in this video's description.
Another exercise that you might try
is actually graph multiple lines on the same chart.
In many cases, you want to look at data and good person
to other data.
So for example, in that same data file,
you'd get the average temperatures
for the northern hemisphere and for the southern hemisphere.
So you could graph all three: the global temperature,
northern hemisphere, southern hemisphere,
altogether on that chart with different colors for each line.
And I'll include a solution to that also as an exercise.
So thank you for watching this video.
This concludes the second part of the first module.
We've learned about the fetch function with images.
And now we've learned about the fetch function with CSVs,
and also graphing the data with Chart.js.
In the next project we're going to look
at how to get data from a web API,
something that's not a local file,
and data that changes every so often.
And the data set, the example that I'm going to use,
is the location in latitude and longitude
of the International Space Station.
Where it is above the Earth?
Then I'm going to show you how to draw its location on a map.
And refresh its location every so
often so that it moves in real time.
So that's the last part of this first module
of working with data and API.
And I'll see you in that video.
Thanks very much.