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.