Tip:
Highlight text to annotate it
X
Hi. This is Makoto, and welcome to the joy of d3.js
This is what we have built so far. I put more data so that it shows the figure
every year, rather than every ten years. We also added mouse over event to show the
country names.
This is getting similar to the Hans Rosling's GapMinder app.
What GapMinder has, however, is map functionally. Click.
If you click this map tab, it transitions from the scatterplot to the world map, though
it's very very slow.
This animation reminded me one of the dot-enter screencast by Ian Johnson.
This one.
In his talk, he showed this smooth animation between scatterplot and world map, which we
can actually play. This one, it's scatter plot, if you click
this, it changes to the world map.
And That's what we are going to recreate with GapMinder today.
So, here are the list of topics.
First, I will talk about two basic d3 api, Path, and Projection, and one data format
called GeoJSON.
Then, I will talk about how to transition circles into the map layout, and one of path
feature called centroid.
Let's go to the first commit.
When you refresh the browser, you only see 5 years of transition, then there is a "map"
function button on the left bottom. Clicking the button render a world map.
So, Let's see the commit.
There's actually not much going on.
On line 9, I added a button which calls map function on click.
And line 31, there are two functions defined, projection and geopath.
And at line 150, here, boundaries.features are attached to data function as well as geopath
we created earlier, which is assigned to "d" attribute.
So, first question. What is projection?
Projection is mapping from 3d sphere to 2d geographical layout.
If you look into d3 documentation page, there are lots of different mapping layout provided
as plugins.
Once you define the projection, you can pass the projection into path function, which is
this one. That provides path generator and various other useful functions.
Once these conversion functions are defined, then you need to actually pass datasets.
And d3 itself does not actually give you geographic data files, so you need to supply in the format
of so called GeoJSON, which is another standard.
If you visit GeoJSON website, there is a sample data format.
Like this.
GeoJSON consists of so called features. The important properties you need to know are
"type", that defined various data shapes, such as Point, LineString, and Polygon.
And "coordinates" that contains lat lon pair And also "properties" that tends to hold various
metadata, such as name of the cities and so on.
Let's see all of them together at the PlayGound.
If you look at "boundaries.json", it contains the boundary of each country.
Like Afganistan, Angola, Albania.
And these are the coordinates.
If you look into the js file, it defines the projection at line 5.
You can adjust size and scales with tributary's slide bar.
You can also try with different projections, such as
Azimuthal. this.
or another one called Albers. Again you can play with the slide bar like
this. Once projection is set, you set the projection
and dataset to the path.
If you want to add marker, you can just append circles with projections.
Here are the example of marking uk and japan This is uk coordinates and this is Japan coordinates.
Japan is passed as pink and UK is passed as blue. And this is exactly what we are going to do
next.
Let's check out the next commit.
Here is the commit log.
I added a function called countryLatLon to filter country name from list of countries
Then I attached the matched countries, lat and lon into the same projection.
this projection we used to generate world map path.
With duration of 1 second.
This is cool, but there is actually a better way.
If you go back to the documentation page of Geo Path, there are other useful functions,
and one of them is called "centroid". As the name suggests the centroid computes
the center point from the boundaries. This means that we don't have to have the
countries.csv that holds each country's geo location.
You can again try this out with the tributary. So, the last example,
So it's selecting all the boundary path.
In this code, it selects path to get each country's feature, and calling path.centroid(d)
where d is the each feature.
So if you take this out. Woh.
It displays all the circles. Though, some of the points,
I think this is Canada and this is US. Probably because it has Alaska, so the centre
point will be. Oh, maybe this is Canada and this is America.
And let's go back to the commit diffs.
I took out the countries.csv, because we no longer need it.
Then, I replaced countryLatLon with getCentroid which does similar thing.
Ok. This is it for today.
Thank you for watching.