Creating a World Map with Timeline Using D3

My newest work! I always wanted to create a world map that is interactive and shows the data in a simple and functional manner. I cleaned my data using EXCEL and then visualize the map using D3.

As always, the code is hosted on my Github, available here.

1) Finding the Dataset

When you look at the stock market, you will see that a stock’s value fluctuates daily with its change being marked by a percentage: in green if it rose, in red if it decreased. I was curious to see how these stats stand for Currency values around the world. After all, the exchange rate of a country is also tracked daily and is one of many ways to see how well the country is developing. Sadly, there weren’t many clean dataset to use out there. I finally settle down with the OECD Exchange Rates Dataset. It has the values of 51 countries, from 1950 to 2016. In the world, there are 180 different currencies and 196 different countries. Furthermore, not all years were tracked by OECD when it comes to exchange rate. We are hence working with an incomplete dataset. Exchange rates are defined as the price of one country’s’ currency in relation to another. In this case, all data were compiled relatively to the value of the United States’ dollar (USD). Hence, for U.S.A, the value is always 1. You can see and download the whole dataset here.

2) Data Cleaning Using EXCEL

First, I used Microsoft EXCEL to clean the data. The countries were already marked by their Location ID, which makes it to map later on. I did a calculation between each of the numbers as I am not interested by the actual value of the exchange rate. Instead, I am more interested by how the change varies. Hence, I did:

In this case, the previous year’s exchange rate is X_t-1 and the current year is X_t. For the first available year per country, the change percentage was caliber-ed to 0. As for countries with no value for one year, they were kept at undefined or NaN. These are the percentages used for the mapping.

Notice that this method is good in the sense that it allows us to see how fast a country’s currency is gaining value compared to others. If we kept the values as they are, we would have some countries being way lower then they actually are. For example, South Korea is known to be a well developed country and sells 1kg of apples for ₩6,513 or $5.78. You can automatically see that even if the value of the Won is less than the Dollar, what that money converted can buy in both countries is similar.

Finally, using Pivot Table functions in EXCEL, the new dataset was built and then converted into a large .csv file.

3) Map Creation Using D3

I first started by adapting my code to follow this Tutorial such that it would work on it. However, this was a less interactive model as the user can’t pick the year it wants to see. Luckily through searching around Github, bl.ocks and Stackoverflow, I was able to implement everything I wanted. You can find the code directly on my Github here.

A) Creating a UI Timeline

B) Changing the Color Scale of Countries

var color = d3.scale.linear() // create a linear scale
.domain([valuesIn[0], 0, valuesIn[1]]) // input uses min and max values
.range([d3.rgb("#FF0000"), d3.rgb("#FFFFFF"),d3.rgb('#00FF00')]);

C) Show Data On Hover

Final note:

For this project, I learned how to:

  • Compress Javascript files: link

java -jar path\to\yuicompressor-x.y.z.jar myfile.js -o myfile-min.js

  • Check the animated side of my project by running in the right directory

python -m http.server 8008


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.