Practice: Choropleth Map

Loading...

Из курса от партнера New York University Tandon School of Engineering

Information Visualization: Programming with D3.js

45 оценки

New York University Tandon School of Engineering

Information Visualization: Programming with D3.js

45 оценки

Курс 3 из 4 — Specialization Information Visualization

In this course you will learn how to use D3.js to create powerful visualizations for web. Learning D3.js will enable you to create many different types of visualization and to visualize many different data types. It will give you the freedom to create something as simple as a bar chart as well your own new revolutionary technique. In this course we will cover the basics of creating visualizations with D3 as well as how to deal with tabular data, geography and networks. By the end of this course you will be able to: - Create bar and line charts - Create choropleth and symbol maps - Create node-link diagrams and tree maps - Implement zooming and brushing - Link two or more views through interaction The course mixes theoretical and practical lectures. We will show you step by step how to use the library to build actual visualizations and what theoretical concepts lie behind them. Throughout the course you will learn skills that will lead you to building a whole application by the end of the lectures (a fully working visualization system to visualize airlines routes). This course is the third one of the “Specialization in Information Visualization". The course expects you to have some basic knowledge of programming as well as some basic visualization skills.

Из урока

Lines, Arcs, and maps

Projections3:36

Drawing Maps5:17

Practice: Drawing Base for Map10:01

Choropleth Map3:05

Practice: Choropleth Map12:51

Adding Additional Marks3:41

Practice: Adding Additional Marks7:35

Познакомьтесь с преподавателями

Enrico Bertini
Associate Professor
Computer Science and Engineering
Cristian Felix
PhD. Candidate
Computer Science and Engineering

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,

that is the name of the country,

is going to be equal to the c.Magnitude.

So, this is going to give me a data set

that contains the name of the country and the magnitude.

So, let's see how this looks like.

So, if I log this file,

you're going to see that I get a list and now is an object.

It's a subscript object where I have the key,

that is the name of the country, and the magnitude.

We're still having those as a string,

so in order to make sure that we don't mess anything,

we're going to add a plus here just to convert its magnitude to a number.

So, you see that now, what we have here is not a string anymore but just a number.

So, now, we already have this easier way to get the magnitude.

The next step is to add this information to our GeoJSON.

Why we do that is because then later since we are drawing out the charts,

all the countries based on just GeoJSON,

it's going to be easier for us to get this information if we just

add this information to the properties in the GeoJSON.

So, how we do that?

We, basically, going to map the original features.

So, remember that inside mapInfo,

I have a thing called features,

that contains all the countries,

and you're going to map this information.

So, every time I use map,

it's basically because I'm changing something inside the object.

So, here, what we're gong do is, first,

get the magnitude from our index.

So, we're going to say, magnitude is equal dataIndex.

But to do that now we need the country name,

and where the country name comes from?

So, the country names comes from our features,

that is our d here.

So, you're going to say that country is equal d.property.

So, remember that GeoJSON store informations about

the object inside the key properties,.name.

So, this is the name of the country.

So, now, I can use that to get the magnitude here.

That's going to be the magnitude that we're going to use for this country.

So, now, we can change the information.

You can say that d.properties.Magnitude is going to be equal to magnitude.

So, we have, basically,

added this information inside d,

and then we have to return d,

so d is a new modifier,

d is going to take place of the original one.

So, let's see how mapInfo looks like now.

So, if you look in our data,

we have our features.

Inside our features, we have the properties.

Inside properties now together with names,

we also have the magnitude information.

So, now, when I'm drawing my chart,

I can use this information.

The next step is, basically,

apply that to the chart.

As I said, we want to use a color scale,

so you're going to just create your scale here and it's going to be a linear scale,

and here the domain.

For now, we're going to go from white to red.

I'm sorry, this is the domain.

So, this is zero to the maximum earthquake we always had.

So, let's compute the maximum earthquake.

So, we can use d3.max to get this information.

We're going to get this information from our features,

and we're going to provide a function that

returns the information that we are looking for,

that is the magnitude.

So, you're going to look for the largest magnitude that we have in

the data set and we're going to use that in the domain.

Then, our range is going to be our colors,

and here it is going to be white to red.

So, also I have my color scale.

I can use these color scale to color my shapes that I have here in my map.

So, I can just come here where we are changing the fill.

So, right now, we're seeing that it's white and we're going to change that.

We're going to provide a function that says cScale of dproperties.Magnitude.

So, this is basically looking on the magnitude of the earthquake,

and then mapping that to the colors.

So, now, we have two problems here that we have to solve.

One is it's not easier to see the difference between all those countries,

and the second is that we have

countries here that we don't have data and they are showing us red.

So, let's first deal with the countries that we don't have data.

You can use a ternary operator.

So, you can say, if we have the magnitude and to do that, we'll just say,

if this is true, because if you don't have the magnitude,

this is going to be undefined and JavaScript is going to understand that as false.

So, we can just say, if the magnitude is available,

then you use the color scale.

Then, this column at the end says that if it's not available,

then your going to use white.

So, now, you see that some countries here are

white because they never have had an earthquake,

at least not in this data set.

The next step is trying to tweak a little bit the color scale,

and what we want to do is to create a range that goes to the median of the data set,

and then a range that goes to the maximum.

This is just a way for us to know which countries are

like below the half and after the half.

So, we're going to compute the median here,

and you can compute the median in the exact same way that you compute

the max with the difference that we are going to change max to median,

and here we're going to call median.

Now, I can add this to my domain.

So, I say that I go from zero to the median,

and then from the median to the max,

and then I say that I go from white to orange,

and then from orange to red.

So, now, all of those that are more orangish and yellowish are actually below the median,

and all of those that are more reddish are those that have the largest earthquake.

You can see that it's hitting the center in Europe and

Africa doesn't have a very large earthquakes.

While you're more in these range close to the Pacific,

we have largest earthquakes.

That's how you can map the color or any other information to the properties of your map.

So, I did this join because it make easier for

us to just use this information as if it just came with the file.

In the beginning, if you have two or three files,

so just join them if it's feasible because then it makes it

easier for us later instead of trying to remember which file we have information.

That's something that we really often have to do with maps

because maps most of the time is going to have two informations,

the information how to draw them up and that

information about the data that we want to show in the map.

Ознакомьтесь с нашим каталогом

Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.

Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.

© Coursera Inc., 2019 Все права защищены.

Загрузить из App Store

Загрузить в Google Play