Showing surplus and deficit

The work ‘Gesellschaft und Wirdschaft’ (1931) contains about one hundred Isotype visualizations. On page 74 we find the graphic titled ‘Wanderbewegung wichtiger Länder 1920-1927′ (movement of people from and to notable countries 1920-27), which is also described in the book ‘The transformer – principles of making Isotype charts’ by Marie Neurath & Robin Kinross. The book describes the design decisions involved in making statistical charts that visualise surplus and deficit. In my opinion, this is one of the most interesting readings about Isotype as it gives an insight in how the Vienna group thought, worked and how their designs evolved over time.

Moving between important countries 1920-27

The original image visualizes 3 variables per country:

  • The number of people emigrating
  • The number of people immigrating
  • The type of transport (by land or by sea)

By using a clever layout, the surplus (to the right of the vertical axis) and deficit (to the left of the vertical axis) become apparent. This is a graphic I often show in presentations to show the power and beauty of Isotype. That is, until a few weeks ago when I showed the graphic to a group of academically educated people. One of the students just couldn’t understand the visualization. Back home I started to study it better and there are indeed a few problems with it:

  • It is not directly clear that one of the goals is to visulize surplus and deficit. Therefore, the layout of symbols may cause confusion.
  • You are not visually guided in finding the parts of the graphic that show a surplus or deficit; you have to analyze each country and reason whether it is about surplus or deficit and then you have to do the substraction between the emigration and immigration symbols yourself.
  • The layout doesn’t permit grouping symbols into groups of five (which would facilitate determining numerical values).
  • Immigration symbols are not distinct enough from emigration symbols, therefore a box is created around the immigration symbols to increase the visual difference.

To solve these problems, I decided to introduce a simple toggle button to switch between a ‘normal’ layout and a ‘surplus and deficit’ layout.

See DEMO 1.

A problem with this layout is that when the surplus and deficit view is enabled, the names of countries and Isotype are not properly aligned. This makes it difficult to determine the relation between countries and symbols.

To fix this problem, we can align emigration and immigration symbols vertically and this results in my final version.

See DEMO 2

Some of the features and benefits of this final version:

  • The user toggles between two views and per view the amount of information is less compared to the original version. The makes it easier to understand the graphic.
  • Groupings of five symbols can be used so it is easier to determine numerical values and compare statistics of the different countries.
  • Because emigration symbols are positioned to the right and immigration symbols are positioned to the left of the vertical axis, there is less need to have a clear distinction between the two types of symbols. The background box around immigration symbols is not needed anymore, so we have less visual variables.
  • The order of land and sea migration symbols is symmetrical around the vertical axis, making it easier to compare land-to-land comparisons and sea-to-sea comparisons.

In fact, by using a toggle button, we just switch between two standard Isotype visualizations.

Edit August 2, 2014:

I had a very interesting with Carel Kuitenbrouwer about this project and we discussed this diagram. He had a very good suggestion:

Don’t let the user navigate to a new view when the user toggles the surplus checkbox, but fade out icons to show the surplus.

I created a new version according to his suggestion and this is, in my opinion, the best version.

See DEMO 3

The advantages of this version:

  • We stay in the same visualization; we don’t navigate to a new view when the checkbox is toggled.
  • The term ‘surplus’ itself is visualized; it is visualized what we mean by ‘surplus’

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>