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. 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.
