Last year, I had a very interesting discussion with Carel Kuitenbrouwer who was kind enough to reserve time to share his opinion about this project. He proposed an improvement of one of my works and now, about a year later, I finally had time to implement his suggestions.
You can find the result here.
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.
When we animate a data visualization, the values shown during the animation never correspond to the actual fluctuation of the observed phenomenon. The reason is that we only have discreet data values and we don’t know the values between the measured points. (In physics this is not true according to the Nyquist-Shannon sampling theorem, but this blog focusses on charts showing statistics and such.)
Nevertheless, you may have good reasons to animate a data visualization. And if you do, do we have some means to measure its quality?
In Gesellschaft und Wirtschaft we find 100 showcases of Isotype usage. The title of chart number 64 of is ‘Staatsausgaben’, or 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.
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.
Jump to the demo immediately: DEMO
In datavisualization, animation is often used to show a fluent transition from one data point to the next data point. For example, the length of a bar in a bar chart can be animated to go from data point A to data point B.
In many cases, animation is used to obtain a pleasurable user experience. This is a functional design decision, because it may be an affordance for the user to start exploring the possibilities of the visualization. But the side effect is that the animation may tell the wrong story. If data point A indicates the temperature at 1:00h p.m. and data point B indicates the temperature 6 hours later, a linear motion from point A to point B is an incorrect visualization of what really happens.
In this study, I explore some possibilities of a ‘data true’ animation. I will take the population pyramid as a starting point.
The graphic above was published in 1947 and shows the population of two cities in The Netherlands: Zeist and Eindhoven. The graphic shows the situation in 1930.
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?
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.
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.