Leandro Collares

Life expectancy and income

An interactive scatterplot that displays life expectancy and GDP per capita figures between 1960 and 2018

The challenge

My goal was to provide users with tools to interact with parts of a dataset containing life expectancy and GDP per capita figures, and use animation to display how these indices changed over time.

A solution

I implemented a responsive visualization comprising a scatterplot, an interactive legend, a year slider and a country tracker. The visualization offers the following interaction possibilities:

  • Hovering over a point causes a tooltip containing life expectancy and GDP per capita indices to be displayed
  • Moving the slider makes the scatterplot show how indices varied between 1960 and 2018
  • Clicking on the legend causes the scatterplot to show data from only one continent
  • Using the selector allows users to see data pertaining to one or more countries

Interactive map
The interactive scatterplot allows users to interact with data in different ways.

You can also interact with the visualization.

Implementation details

React.js and D3.js were employed to build the visualization. React renders visualization components, whereas D3 handles data and calculations. The selector was built with Ant Design and animations made with CSS.