CITY OF WORLD

D3.js / P5.js | WINTER 2017

 

A WEBGL BASED 3D DATA VISUALIZATION BASED ON THE METAPHOR OF A CITY, VISUALIZING WORLD POPULATION DENSITY CHANGE OVER THE PAST 10 YEARS.


FEATURES
PROCESS

main_image

“No country is perfect, you have to strive towards perfection, to make it better”

 

But what if, you have an overflowing population, which not just burdens the physical infrastructure, but also depletes your natural resources faster than replenish-able?

I grew up in India and spent a good 22 years there to realize that we as a country have a scarcity of resources. Then at 23, I came to the US to pursue my Masters and I was surprised at the overabundance of land, clean air, and water. Which made me realize that population density was a major factor holding India back in terms of development.

To understand this better I researched and developed a visualization to correlate the population of different countries and the land area they hold.

FEATURES

The visualization is inspired by the metaphor of a city and treemap visualization. 
 
The treemap division is based on the surface areas of countries. 
treemap
The height of every cuboid is derived from the population density change.The height can be positive or negative ( analog to rising buildings or deep underground areas) depicting increase or decrease in population. Also, the saturation of the color of every cuboid is derived from the population change.
buildings_2buildings_1
The change in the population over the past ten years can be seen by choosing the years or simply pressing the enter key, which takes you through a time lapse of what has happened over the years.
year_selection
It is a WEBGL based 3D visualization with an embedded time-lapse animation.
3D_viz

PROCESS

Data Collection: The data of world populations and also surface area of every country was collected from the UN database. 

Data Analysis: The data was analyzed and combined into a single CSV in the desirable format which could be used by D3 to bind the data. This part can be seen on python notebook here. 

The data is bind and the interaction is handled by d3. 

The WEBGL based 3D visualization is drawn using the THREE.js library.

WORK IN PROGRESS

  • Scaling buildings in time lapse animation. 
  • Rendering Text of the Countries at respective locations in WEBGL. 
  • Placing Filters in place which would be used for selecting specific countries individually, based on population range and so on. 
  • Make a Reader.