Global Birth Rates Interactive Data Viz


This interactive data visualization displays the population and birth rates of every country on earth. The user can travel from 1950 up until 2010 and watch the countries develop.


Programmed Design II incorporated the creation of an interactive data visualization based on real data using only colors and basic shapes. Main goal was to find interesting relationships in the data and display them in several connected visualizations in a comprehensible way.


This project uses open data supplied by the UN about fertility rates (children per 100 women in the corresponding year) of most countries, age distribution of mothers and their total populations. Additionally, as a map based view proved to be the most readable, I used Googles coordinate data to map each countries data to its geographic center. Each datapoint was available every 5 years from 1960 to 2015. This makes it possible to see how each country changed in the past 55 years.

Two circles represent each country. The inner circle area is calculated according to birth rates and the outer one according to population. While both values cannot be directly compared, their relation and change over time can.


The user can select countries on the world map to compare them. Selected countries are added to the selection on the left side of the screen and normalized to display their population as the same radius. This makes their individual birth rates easier to compare. From there on, users can view birth rates of all years of all selected countries or get a detailed view of birth rates in all six age groups. This is of course available in all years.

Trackpad Controls

Because nothing like buttons and text were to be used, I implemented trackpad gestures via BetterTouchTool.

Select Change Year Birth Rate Change Birth Rate Detail Deselect
The user is presented with a world map and can hover over any country to highlight it. A left swype with two fingers adds a country to the selection. A darker shadow stays on the world map to indicate which countries are selected. A swype right deselects the respective country. The selected countries are lined up on the left hand side.
On any screen a hold and drag changes the current year. The inner and outer circles change in color to distinguish between each year. The inner and outer colors are interpolated from lavender to red.
When hovering over a selection, the circles increases in size for a small amount to hint at further action. Swyping right displays all birth rates from 1950 to 2015. The color interpolation is clearly visible and the population is not displayed. The selected countries vertical position remains unchanged to keep the visualizations consistent.
A zoom-in gesture triggers a detailed view of birth rates distinguished by age groups. All other circles in this visualization display averaged birth rates. It is possible to scroll through time here and the change certain countries went through in a relative short amount of time becomes obvious.
The user can deselect each country and add new ones to the selection fluidly.

Process and Technology

After I found a couple of interesting data sets. I started with scribbling different screens and ways to display the data to get an idea how my visulalizations could look like. After my topic was settled I created Illustrator concepts of the complete information structure over multiple iterations. Once that was done I used JS and GSAP to build a working prototype.


This is a student project created during winter semester 2016 of the Programmed Design II course by Hartmut Bonacker and Jens Döring.