2015-2100 World Population Data

A visualization of world population data from 2015 to 2100 using D3.js.

Have a look!

Here is a video that introduces this project in details.(Link to Youtube)

How to Use

• Select the Data Type
  In the data type selector (middle bottom of the map), you can select the data type you want from Population, Median Age, Total Dependency Ratio and Old Age Dependency Ratio.

• Select Country
  By clicking any country in the map or selecting in the country selector (right bottom of the map) , the age pyramid and the bar chart below will change according to your selection.

• Select Year
  By drag the bottom year bar or clicking the bars in the bar chart, you can select the year you want and the map will change according to your selection.

Introduction of Concept

• Total dependency ratio is a measure showing the number of dependents, aged 0 to 14 and over the age of 65, to the total population aged 15 to 64. This indicator gives insight into the amount of people of nonworking age compared to the number of those of working age.
  
  

• Old-age dependency ratio is aged over the age of 65, to the total population aged 15 to 64.
  
  

Data Source

The data is from United Nations: World Population Prospects 2017.

Prototypes and Developing Stages

1. Static Map
   At first, I made a world map with 2050 Dependency Ratio data of each country. You can find it here.

2. Selectable Year and Country
   Since this prototype only shows one year (2050) of Dependency Ratio data, I want to start a project that allows user to select the year to see the change of data in different years. I think a range input <input type="range"> would be a perfect choice for this year selector. Then I think clicking a country in the map to select a country is pretty good idea.

3. Selectable Data
   After accomplishing selectable year and country, what about showing more kinds of data. Then I add a data selector which enables users to select diferent kinds of data, and the map will be in different colors. I use Python to pre-process the data instead of processing multiple CSV files using D3.

Deployment

This project uses NPM and Webpack. To get started, clone the repository and install dependencies like this:

cd WorldPopulationData
npm install

You'll need to build the JavaScript bundle using WebPack, using this command:

npm run build

To see the page run, you'll need to serve the site using a local HTTP server.

npm install -g http-server
http-server

Now the site should be available at localhost:8080.

For automatic refreshing during development, you can start the Webpack Dev Server like this:

npm run serve

References

1. The idea of using bar chart comes from UNHCR Historical Refugee Data.
2. The idea of year range input is from Custom range input slider with labels.
3. The map is built by DataMaps.