In this video, I want to show you how you can use
data to then change properties on the maps that we created.
So, more specifically, what we want to do
here is to use information about the magnitude of
the largest earthquake we ever had in a country and then map that to the color.
So, this means that the countries here that has the strongest color are
the ones that had the largest earthquake compared with those with the lighter color.
To do that, one important thing is that we have to load the two informations.
So the first information that we've been loading before is our country GeoJSON that
contains information about which countries we
have in the world and their borders and how we can draw them.
So, this is the information that we get on the GeoJSON.
But we don't get any information about the earthquakes.
So, we need a second file to that,
and this is coming from our
dataset.csv that contains the information about the earthquakes.
The problem here is,
if I have two files like this every time I have to load your files in JavaScript,
I'm going to have a problem because they are asynchronous.
So, if I need these three information,
I need a way to wait such that both files are loaded,
and then I can call my function.
I cannot load one file, call the function,
and then when the other one is available, call the function.
So, in order to solve this problem,
we have an API in JavaScript that is Promise.all.
So, Promise.all, basically, you provide an array.
So, here we have an array and each element of this array is what we call a promise.
Most of the time you can think of a promise as
an asynchronous function and when you have this.then thing at the end.
So, not a 100 percent but most of
the libraries use this.then when they are implementing a promise.
This means that if you are using the.then,
you can use with this API,
and that's our case here.
So, JavaScript is going to wait for both to be available,
and when both data are available,
then is going to call showData.
So, now, we have a difference because now when we call showData,
our data is going to come in a different way.
So, you're going to first instead of receiving only one information,
you're going to receive an array.
This array is going to contain the information in the same order that I load.
So here on the top, what we did was to load first the data,
and then the country.
So, now here in our showData,
we're going to have zero as being our data
because it's the first and one as being the informational format.
So, after all that,
we have the data that we need to draw,
so we are ready to start drawing.
I just want to show how the data looks like.
So, our data set contains information where we have,
first, the name of the country,
inside the field country,
we have the date of the earthquake,
the magnitude, and then more information with
some reference that is incomplete heeding our data set.
The information that really matters for us is the magnitude.
We are not really concerned about date right now,
and the name of the country because we have two data sets.
So, now, we need to connect the shape with the information.
To do that, we're going to use the common information,
the information that we have in both data set that right now is
the name of the country. How are we going to do that?
So, we first, we're going to have to go through each element of our data,
and we are going to create what we call dataIndex.
So, a dataIndex is just an easy way for you to get some information.
So, basically, now here, we have an array,
so it's hard for me to just say I want information about Afghanistan.
I would have to go through the array and find this information.
But if we create a dataIndex,
we can just tell the system I want information of
Afghanistan and the system is going to give us.
So, let's see how this looks.
So, we create a JavaScript object, this our dataIndex,
and then we're going to go through each element of our data.
So, we have our data here.
Then, for each country that we have in our data,
we're going to check the name of the country first,
so it's going to be,
this our data, so it's c.Country,
this is the name of the country,
and then we're going to say that our dataIndexcountry,
