Nobel Laureates

Abstract Data Visualisation

This interactive data visualization provides insights into the lives of all Nobel Laureates from 1901 to 2016. The information is encoded only through color, shape, size, position and animation. No alphanumeric characters or pictographic representations of any kind have been used. 

Getting the Data

The Data Set

I have chosen the data set "Nobel Laureates" from the official site of the Nobel Prize Committee. With 970 entries, it includes data on all Nobel laureates from 1901 to 2016. Since the dataset has an extraordinary number of nominal values for the life stages of the laureates, I decided to focus on the people behind the prizes.

Data Cleaning

Before I could continue working with the data, I first had to clean it up.  I had to correct the country data manually, as the names of individual countries still referred to old, no longer existing country borders. This is due to the historical dimension of the data set.

Combining the Data

Combination of Features

The aim of a visualisation is to create insights by generating information from data. This is especially successful when different aspects and dimensions of the data set are combined with each other. Therefore I examined the data set for all possible combinations of characteristics.

Quick sketches

Out of these 23 possible combinations I schematically visualised the potentially most interesting pairs of features in form of simple hand sketches. It turned out that rather interesting representations emerge when more than one feature is being encoded.

Rapid Prototyping

In the next step, I selected six of these sketches to check their compatibility with the data set. Therefore I summarised the needed data in Numbers and visualised them using simple bar, column, pie and scatter charts. This allowed me to quickly see which representations worked with the data and whether interesting representations and insights are generated.

Using p5.js

I implemented more complex concepts with the help of p5.js, which also made it possible to visualise more complex representations quickly.

Designing the Visualisations

Intro Screen

The intro screen is made up of two views. In the first, the award winners are arranged in two clouds of dots, separated by gender. The other view shows the grouping into the six award categories.

These seemingly simple compositions are complemented in content by the two colour codes (by gender and by category), in that the user always has the option of switching between the colour codes in order to add another level of comparison to the representations. 

The redundant coding of colour and position immediately establishes the relationship between colour and content. In this way, the user can see which categories made up the genders and, conversely, which genders made up the categories.

World Map

The geographical distribution of the laureates is visualised on the map using characteristics such as country of birth, award and death. The position of the country squares results from the mapping of the country coordinates on the screen. In the first versions, the number of laureates per country was encoded by the size of the respective country square.

One interaction concept was to hover over the country squares using paths to see how many laureates have gone to that country to work at an institution there to eventually win the Nobel Prize.

In one variant, I wanted to visualise the migration patterns of all award winners. In this representation, the focus is placed on the movements along the East-West axis, and shows that a large proportion of the award winners go to the West or to countries located more to the West for their research.

In the final design, each laureate is represented in the form of a small circle, which resulted in the point clouds. In total, there are three views of the world map, showing where the laureates were born, where they researched and won the prize, and in which country they ultimately died.

Age of Laureates 

In this representation, the age of the prize winners at the time of winning the prize is compared. Similar to the time map, the X-axis shows the time dimension from 1901 to 2016. The award winners are arranged from left to right according to when they won the award. The Y-axis indicates the age of the award winners and ranges from 0 to 100 years from bottom to top.

In order to make it as clear as possible to the user which characteristics are shown in which dimensions, I have also designed two views that form the thematic context. 

The first view shows the age of the candidates at the time of their birth, which seems banal but helps the user to classify the presentation in terms of content.

The third view shows the last stage of life and the age at which the award winners died. Those laureates who are still alive are moved into the background by a reduced opacity, as the focus is on the deceased laureates.

Interactions without UI Elements

Arrangement of Screens

The system consists of three screens, each divided into two or three states. This results in a total of eight screens.

The first screen is the intro screen, which introduces the user to the gender and category grouping. Its function is to familiarise the user with the colour codes used in the system and their meanings.

Screens 2 and 3 visualise the life of the award winners in the purely temporal dimension and in the temporal-geographical dimension.

Interactions

Since no graphic UI elements are used, all interaction takes place via the mouse.

The number of states per screen determines how many equally sized parts the screen is divided into horizontally. To switch between the states of a screen, the user simply has to hover over the transparent screen elements with the mouse, and the corresponding transition between the states is animated.

To switch globally between the screens, there are small rectangles at the top and bottom of the screen that extend across the entire width of the screen. If you hover with the mouse over these rectangles, which are also transparent, the transition to the corresponding screen is animated.

With a click of the mouse, the user can switch between the two colour codes at any time and anywhere in the system.

Color Coding

Sex

The colour choice for gender coding was made relatively quickly. The symbolism of blue and pink, especially when viewed side by side, has now become a convention and creates a clear contextual reference.

Category

To colour-code the categories, I arranged them in a 2D matrix. Along the X-axis I placed the categories between "Science" and "Free Work and Art" and on the Y-axis between positive and negative association. The assessment of the associations was based on small user surveys.

Two groups quickly emerged from this assessment. "Peace" and "Literature" in the upper right corner and the sciences "Physics", "Chemistry" and "Medicine" in the third square duck. "Economics" was almost midway between the two groups.

I applied a multi-level colour gradient from "warm" to "cold" over the matrix and assigned the cool colours to the more positive categories. The idea here was to associate the colour blue with innocence and the United Nations, while the categories chemistry and physics could rather represent a danger and therefore got the warning colours red-yellow.

Through feedback, I found that a large proportion would assign the colours in exactly the opposite way, whereupon I adjusted the colour gradient and set the final colours.

Reflection

Sense for Composition

Through the intensive exploration of different encoding possibilities, I have gained a good sense for the use of colour, shape, size, position and animation to communicate information in visual compositions.

Project

  • Computational Design 1
  • Semester 2
  • HfG Schwäbisch Gmünd

Duration

  • October 2019 - January 2020

previous project

next project