Living Globe: Tridimensional interactive visualization of world demographic data

Ed Duarte
3 min readAug 14, 2017

Living Globe is a WebGL application for tri-dimensional worldwide data visualization. It allows the simultaneous representation of multiple indicators as spatial structures (bars and other objects located in a specific latitude-longitude on the globe). The mapping of data to the provided visual structures is configurable by the user, introducing an aspect of customization which encourages a more immediate, visual-only interpretation of the data. Additionally, the represented data is normalized within an adjustable scale. This can be used to filter out extremely high or extremely low samples, uniforming the remaining data and improving its visibility.

Current prototype of Living Globe, showing population growth mapped to the bars/pilars height, total life expectancy at birth to bar color, and birth/death ratio to country color.

Our prototype was developed with demographic data in mind, like total population, density, population-growth, life expectancy, net migration, crude birth rate, crude death rate and the ratio between the last two. However, today it actually allows the visual exploration of the any kind of numerical data structured in JSON by year and by country. We provide two example input files: “input.json” (containing demographic data between the years 1960 and 2014) and “input_alt.json” (containing miscellaneous data regarding finance, demography and employment between the years 1960 and 2014).

While offering inexperienced users a default mapping of these data variables into visual variables, Living Globe allows more advanced users to select the mapping they intend to use. This means that users can control over an earlier stage of the visualization reference model (Riccardo Mazza. Introduction to information visualization. Springer-Verlag London, 1, 2009) making Living Globe a more flexible tool than other similar tools.

In order to support this feature, three visual variables may be selected to map a data type:

  • height of vertical bars (directly proportional to the data value);
  • color of vertical bars (in a color scale ranging from blue to yellow);
  • color of the countries on the globe (in a scale ranging from red to green).

An adequate selection of the data variables and their mapping to the visual variables may help the identification and study of potential relations among data variables. The time interval can be changed through a slider.

Living Globe also offers the following functionality: i) textual search, with dynamic suggestion of the countries names; ii) country selection; and iii) configuration of minimum and maximum data values; This last feature, which filters out countries that do not match the minimum and maximum values and normalizes the remaining data set, can potentially lead to improvements in the interpretation of data in countries with small samples (eg. Portugal) by filtering out countries with large samples (e.g. China).

Living Globe showing total population mapped to the country color: the data from all countries is displayed on the left, and filtering out large population countries (such as China and India) on the right (resulting in a representation with much more diverse and distinguishing colors for the remaining countries)

This application can be tested here. It is built with Javascript ES6, jQuery, three.js and chroma.js, and the codebase is open-sourced on Github.

Originally published at edduarte.com.

--

--