World Population Distribution

Project 1

Still Crazy After All These Years

This is the first project developed for CS 424.
The app shows the distribution of the population around the world and in the US states.
Demographic data about the states can be filtered accordingly to the gender and easly compared among the states.
Finally the user can choose an event in the history and see which percentage of the population was conscious of that event.


How to use

Video Tutorial

In the bottom left of the application there is the control panel. Controls share a purple color that convey the idea that they belong to the same class and thus all the elements in purple can be controlled. In the next section each control is explained in detail.

Gender Control:

You can filter the data that is displayed accordingly to the gender: masculine, feminine or their sum. This can be achived by intuitive controls in the bottom left of the app.

Bin size control:

the default view of the chart have a 10-sized bin, basically population is diveded accordingly to their age 0-9, 10-19, 20-29 etc. The user can dig into more precise data by decreasing the bin size with the plus control positioned in the bottom left of the application or if usuful can increase the bin size clicking the plus icon.
At any time the bin size is reported inside the circle.

Compare mode:

the app allows to types of visualization: Absolute or Comparison.
In the Absolute mode each graph has its own scale and this is particulary useful to go deeper in the visualization of a particular distribution.
The Comparison mode rescale all the bar charts setting them on the same scale so that the user can compare the distribution of the popolation among the states at a glance.


the control panel host a timeline of meaningful events in the last 2 centuries and allows the user to select one among them. Once a year is selected the bar chart hides all the people that were not conscious of that event and thus do not remember it right now. By clicking on the X on the bottom right it is possible to deselect all the events and a text ask the user to select an event.

In the top left of the application there are the map. This represent a precious help for selecting which country to display. The user can display the world map or the US map and choose which state to visualize data for.

In the case the user do not know where is a state he can pick up a US or World state from the state list. Notice that once the state is select the user visualize which is the state position in the map.

When a state is selected two graph are shown: a bar chart and a pie chart.
The panel gives several information: the state selected, the distribution of ages accordingly to the bin size and most interestingly the population percentage that rembers the selected event.
In this case only 61% of Italians remember the fall of the berlin wall (previously selected), moreover the bar chart conveys the idea that only people over 30 years old do remember the event.


The data used is taken from US population and from World Countries Population.
Then I wrote several R scripts in order to pre-process data and create a standardized format between the different datasets. I'm very gratedul to my Data Mining course since I could manipulate data without getting lost.

The format that I used has the following rows: stateName, year, sex, [ages from 0 to 84].
All the data used in the app is about 2014 and the sex is divided as follows:
0: no sex distinction
1: only masculine
2: only feminine
This format has allowed me to manipulate data quite easly with d3.js and filter it accordingly to user preferences.

Source Code

The code is available at this repo. Just in case you want to download it right away there's a zip at the bottom of this section;)

Run it

Oh don't forget to install WAMP, LAMP or anything like that to set up your local server.
Once you're done with it just copy the app folder in the web server folder access the url localhost:8888/index.html on your browser and voila.

In case you want something even faster you can quickly set-up a web server with python. To run the application on your local machine just unpack the archive in a folder. Go in that folder with a terminal and type: python -m SimpleHTTPServer 8888 In order to to so you must have python installed. Python Download
Then just open a web browser (an updated version of Chrome is highly recommended) and visit the url localhost:8888/index.html

External libraries

The web application has been written in plain javascript, CSS3 an HTML5. Few external libraries have been employed:

D3.js a nice library for data visualization

Queue-js Simple library for asynchronous method handling

Topojoson-js Library to manipulate geographic json files, or as M.Bostock says "An extension to GeoJSON that encodes topology"

d3-geo-projection-js Extended geographic projections for D3.js.


I can see something...

The population of US is generally quite constant between 0 and 60 anyway there's some jump around 68 which is common in the overall distribution of population of US and in each US state (here just Colorado and Illinois).

Middle east is very insteresting because the pattern seems to be a very skewed curve that diminshes as age increase.
This may be due to the fact that there's a lot of poor people that do not survive untill elderly age.
Anyway Iran has a strange hump that doesn't follow the general pattern but I still have no clear understanding of the reason.

What is strange is that Iran seems to follow the same distribution of South Africa. Although very geographically far this may lead some insigth about some common traits of the demography of the two regions.