From CS294-10 Visualization Sp11

Jump to: navigation, search



Demographic Dividend[1] is a rise in the rate of economic growth due to a rising share of working age people in a population. It is argued that this theory brings economic miracles and can be supported by examples like East Asian Tigers[2] or Celtic Tiger[3] during 80s and 90s. I was interested in looking at the demographic dividend of BRIC countries (Brazil, Russia, India and China) that are heralded as the future economic superpowers for next forty years.

Data Domain

United Nations Data repository have population forecast for all the countries till 2050. To calculate demographic dividend, we have to calculate dependency ratio, which is an age-population ratio of those typically not in the labor force (the dependent part) and those typically in the labor force (the productive part)[4]. Dependency ratio and demographic dividend are inversely proportional. To simplify things I chose inverse dependency ratio to display in my graphs since it has direct relationship with the demographic dividend. Inverse dependency ratio can be calculated by simple formula viz. number of people aged 15 - 64 divided by number of above and below 15 - 64 years.


I realized a simple line graph would best represent the demographic dividend changes from 2010 - 2050 for BRIC countries. User can view the demographic dividend for any of the BRIC countries by selecting them individually. User can also compare the demographic dividends of BRIC countries by selecting two or more countries to display their respective charts. Here are some of the early sketches:

Dhawal Mujumdar A3 Sketch1.JPG

Demographic dividends of all the countries are shown by default. User can select/deselect any country from configuration panel on the left. Instead of using checkboxes (I find them ugly) I wanted to use a concept of switches, which are widely used on touch based smartphones (especially iOS devices). Users slide these light button style switches to turn something on or off. Given the purpose of checkboxes precisely the same, it made perfect sense to have something similar in the configuration panel.

Dhawal Mujumdar A3 Sketch2.JPG

A sketch displaying demographic dividends of India and China by turning their respective "switches" to "yes".

Final Interactive Visualization

I wanted to produce final interactive visualization for web platform. I chose Highcharts[5], which is a javascript based library for interactive visualizations. I've previously used number of javascript libraries like Protovis, Raphael JS etc. for data visualizations. I came across Highcharts and liked the simplicity of this library. Thus, I gave it a shot. As discussed I wanted to implement light switch style interface for checkboxes. I was looking to create something similar using jQuery but discovered the wonderful lightswitch jQuery plugin[6], which solved checkboxes problem for me.

I downloaded the required data from UN Data Repository and cleaned it for the said purpose. I calculated inverse dependency ratios for all the BRIC countries (based on the obtained data) and plugged everything into final interactive visualization. Given below is the screenshot of interactive visualization.

Dhawal Mujumdar A3 Visualization.png

Final Interactive Visualization can be found here: http://bit.ly/a3-dhawal


Data exploration and cleaning required lot of investment in terms of time and efforts. Next step was actual implementation, which was time consuming. I was using two external packages (i.e. Highcharts library and lighswitch plugin), there was an initial learning curve. Getting everything stitched together was particularly challenging. But I'm satisfied with the output since I was able to implement something that closely matches to the initial concept. Additionally, I also got my hands dirty with another visualization library.

Source Code

Source code can be downloaded from following link: http://people.ischool.berkeley.edu/~dhawal/BRIC_Visualization/Dhawal_Mujumdar_A3_Source.zip

[add comment]
Personal tools