Responsive Isotype

Responsive webdesign is a design that facilitates reading a website on both desktop computers and mobile devices of all sorts of sizes. Smart solutions have been around for a number of years now and a non-responsive website is almost considered a sin nowadays.

Chart libraries like Highcharts are created with responsiveness in mind. But custom visualizations and infographics are often one-size only productions and can only be viewed in their full glory when viewed on a large desktop screen.

My first encounter with a responsive data visualization was when I started an assignment at NOS. Yoeran Luteijn showed me one of his responsive visualisations and explained how important it was for a news agency to support all kinds devices. Later on, I saw this inspiring talk by Garbiel Florit and I was convinced that I should dive deeper into the possibilities of responsive visualizations.

Continue reading

Shifting the comparison axis

In Gesellschaft und Wirtschaft we find 100 showcases of Isotype usage. The title of chart number 64 of is ‘Staatsausgaben’, or public expenditure.Public expenditure

Per country we see the relative expenses on 7 different topics. Each circle represents 4% of the total expenses. A vertical axis divides the topics in a left and right part. This makes it possible to compare countries with respect to the grouping on the left and grouping on the right. Then the user can ‘zoom in’ and view how each group is subdivided into 2 respectively 5 topics.

Continue reading

Animating horizontally ordered symbols

Many Isotype charts contain horizontal rows of symbols. An example is the classic population pyramid. An Isotype version can be seen below:

A common practice is to animate a single pyramid over time. Applying this to the Isotype population pyramid means that we have to introduce a user interface element to select a year and that the selected year defines the number of displayed symbols.

The question is: How do the symbols behave during the transition of one year to another year?

Continue reading

Animated ISOTYPE: Population Density

This is the first publication of my Isotype project. I spent about 2-3 days on this datavisualization. I used the website ‘het Geheugen van Nederland‘ to browse through the great collection of Isotype publications by Gerd Arntz. Many of these publications can be modernized (i.e. updated with current statistics and be made interactive), but it was more difficult than I expected to provide interactivity such that it is interesting and provides added value to the original static production.

I chose the population density illustration for my first publication. This is a fairly simple illustration with only two different icons (country and inhabitant). Below you see the original image, which can also be found here.

Continue reading

Modernising static ISOTYPE productions

In this post I would like to announce a private project that I will start very soon. Every month I will publish a modernized version of an illustration that was made originally by the late Gerd Arntz. Gerd Arntz has created many statistical datavisualizations, starting from around 1930. In each publication, I will take an original production and update it with current statistics and modernize it so it will become an interactive visualization. My project has received approval by the Gerd Arntz Estate, which consists of Gerd Arntz’ heirs (‘erven Gerd Arntz’), to whom I’m very grateful.

Continue reading