Voor Onderzoek, Informatie en Statistiek visualiseerde ik de uitslagen van verkiezingen in Amsterdam sinds 1918 per verkiezing, per partij en per wijk. Kleine moeite om hetzelfde te doen voor de landelijke cijfers.
Ieder icoon in de visualisatie hieronder staat voor een patiënt aan wie in 2013 euthanasie is verleend vanwege psychisch lijden. Klik op een icoon om het oordeel van de toetsingscommissie te lezen of gebruik de labels aan de linkerkant om de data verder te onderzoeken.
Deze visualisatie hoort bij een multimediale productie op De Correspondent gemaakt door studenten van de opleiding Journalistiek en media van de UvA.
‘Show, don’t tell’ dictates the famous credo in creative writing. Maybe it should say: show and tell. Communication often benefits from the combination of text and images. Within one message, some meaning is best encoded using written language while other information is best expressed in a picture, a graph, a diagram or a map. Combinations of these representational modalities are part of all kinds of genres, like news reports, textbooks, scientific articles, advertisements, comics, and even novels.
Although text and images can complement each other and thus can benefit comprehension, their combination also forces the readers to split their attention between the two. To reduce this split attention effect it is mandatory that text and image are optimally integrated. This can be achieved using design (for example by placing related textual and graphical elements close together, or linking them with lines or arrows) or by creating linguistic relations, like a textual reference to an image (‘see figure’), or its content (‘as the figure shows, there was a peak in January’).
Digital media have added a powerful new way to integrate text and images: interactivity. Let me explain by example. The model on the right, based on the dissertation of Cengiz Acartürk (pdf), shows how a combination of correlated text and image (a so-called multimodal constellation) consists of a text layer and a image layer. The first contains the written text, the second is divided in two sublayers: one containing graphical elements the other textual elements (for example a title, axis labels, numbers and verbal annotations). All layers and sublayers can be linked together by referential relations. Examples are written words in the text layer that refer to the image as a whole (link 1) or to the content of the graphical sublayer (link 2). Within the image layer, textual elements can be linked to graphical elements (link 3), for example by pointers. As this paragraph illustrates, all these links also can be interactive.
Several researchers have experimented with such hypertext connections between text and images. In the late 1990s, human-computer interaction researchers Pete Faraday and Alistair Sutcliffe studied interactive co-references between text and animations and measured a positive effect on comprehension. More recently, educational psychologists Tina Seufert and Roland Brünken also concluded that hyperlinks can guide the attention of the reader to relevant connections between text and images.
Interestingly enough, interactive text-image references are rarely used on the web. Sometimes they appear in long forms, the storytelling format that has become quite popular the last couple of years. For example in Snowfall, the archetype of this new genre created by The New York Times, hyperlinks in the text can be used to start correlated video. More sophisticated are Bret Victor’s explorable explanations and reactive documents, that allow users to manipulate text and images thus enabling what Victor dubbed ‘active reading’. Be sure to try out his redesigned version of Watts and Strogatz’s seminal paper on ‘small world’ networks.
From there it’s a small step to interactive links between text and data visualizations. Especially when visualization is used to communicate rather than to analyze data, good annotation is essential. Accompanying text can tell the audience not only what the visualization is about but also how to read and use it, for example by highlighting interesting parts or applying filters.
Let me again illustrate with a example. This chart shows the increase and decrease of the population of Amsterdam during the last decades. Theindicates the total growth or decline. Except for the years the population has been growing. This is mainly due to : more births than deaths. The last couple of years the net also has been positive: more people in The Netherlands move to the capital than vice versa. The same is true for the net although the influx of citizens from abroad is considerably lower than in .
This chart is part of a project I did for the Research and Statistics Bureau of the City of Amsterdam that contains several more examples. If you have different thoughts on the interactive integration of text and images, or other examples, feel free to share them in the comments below!
This weekend finally my copy of The Functional Art arrived, Alberto Cairo’s long-awaited introduction to infographics and visualizations. Jubilant reviews can be found around the web (among others by Robert Kosara, Nick Diakopoulos, and Stephen Few) so I’m not going to praise again Cairo’s excellent mix of design practice and perceptual and cognitive theory, the wealth of his examples – mostly his own work- and the very interesting interviews with the avant-garde of data visualization and infographic design. Instead, I will focus on just one chapter, not very surprisingly number 9: The Rise of Interactive Infographics.
In this chapter, Cairo discusses general concepts from interaction design and describes – with a lot of examples – how these can be applied to infographics. So Don Norman’s principles of design (visibility, affordance, feedback, constrain, and consistency) lead to useful rules of thumb like: highlight relevant parts of your graphic, don’t hide pieces that are essential to understand the whole story, make sure the design of objects suggests what you can do with them, and be consistent in your interface design, preferably throughout a series of graphics.
In a similar manner, Ben Shneiderman’s Visual-Information-Seeking Mantra is the point of departure for a paragraph on the structure of interactives. Examples show how different interactive techniques (scroll, zoom, sort, filter, et cetera) can be used to navigate linear and non-linear graphics. At this point, I somehow expected a reference to the appraised work of Segel and Heer on narrative structures of visualizations, but true to the title of the book Cairo prefers a typology of interaction by Rogers, Sharp, and Preece. They categorize styles of interaction that are not based on form or structure, but on functionality. What is the purpose of the infographic: instruction, conversation, manipulation, or exploration?
I would have really loved if Cairo had elaborated a bit more about how interactivity in his view not only can be used to navigate an infographic, but how – from a cognitive perspective – it can help the user to achieve these different goals. What techniques are better for exploration, and what structures are ideal for instruction? However, this book is not only about interactives. For that, we have to wait for this German work which is due next February. And hey, wasn’t somebody trying to write a thesis on this topic?
Back to chapter 9. The final paragraph is about planning an interactive project. You won’t find lists with bullet points taken from some project management guide here, but a step by step personal account of a project Cairo did with The New York Times, including interesting facts about the topic at hand (in this case tennis courts), personal anecdotes and homage to the people he worked with. This style is illustrative for the book as a whole. Cairo writes from a first person perspective about his own experiences in the newsrooms of magazines and newspapers around the world (his print background shows when he consequently writes about ‘readers’ instead of ‘users’). Footnotes and references show he is up-to-date with the literature in several disciplines, but you never get the feeling you are reading a textbook. Apart from the outstanding content it is this conversational style that makes this book a must-read for everyone interested in infographics and visualizations. Reading it is learning with a smile on your face.
How can I have missed this? Edward Boatman is the new Otto Neurath. As a design student in college he had a thought: “What if I had a sketch for every single object in the world?” After graduating he started working and was too busy to do something with his idea. However, due to the crisis he lost his job and suddenly found himself with a lot of time on his hands. With the help of his wife and an old friend he decided to make his dream come true. The Noun Project is an attempt to collectively build a database of universal icons and make them available to everyone. Read Edward’s story, view the video below, and take a look a all those beautiful icons, one for every noun in the world!
(Hat tip to Cool Infographics)
Take one look at the laureates of the Information is Beautiful Award that were announced last week and you know the visualization community is as international and cosmopolitan as it gets. Winners are based around the world, from the United States (Stamen) and the United Kingdom (Peter Jeffs), to Germany (Moritz Stefaner), Italy (Michele Mauri), Denmark (Peter Ørntoft), and Australia (Trent Brooks), to name just a few.
Of course that is a very positive development. However… I must admit that I was a bit disappointed that the two Dutch submissions stranded in the longlist (MusicalNotes by Lisa Dalhuijsen) and the shortlist (Timemaps by Vincent Meertens). Fortunately, there will be new opportunities next year. To be sure there will be at least one Dutch candidate for a gold medal, I hereby would like to nominate Close Votes, the beautiful interactive on last month’s parliament elections in The Netherlands created by Jan Willem Tulp.
Many will agree that The New York Times and The Guardian are important – maybe the most important – pioneers when it comes to the use of interactive visualizations in journalism. Therefore it is interesting to compare these two newspapers. How do they manage the production of their interactives? And what are the similarities and the differences in their visualizations? Actually, these are precisely the research questions that Marije Rooze answered to get here master’s degree.
In her thesis (supervised by Yuri Engelhardt and myself) Marije first describes the characteristics of both papers and how they organize their online activities. To find out whether differences in identity and approach lead to differences in design and production, she then analyses 156 interactive graphics created by either The New York Times or The Guardian. Among the variables that she compares are the topic of the visualization, the kind of data that are used, the level of user participation, and the implemented storytelling techniques.
She concludes that her research has shown less exciting results than expected. The visualizations produced by both news organizations are in many ways comparable. With one exception: The New York Times regularly involves the audience but in a rather restricted setting. It this regard The Gray Lady still fits in the classic gatekeeping model. The Guardian, on the other hand, offers users the opportunity to create their own visualizations and thus redefines its role from the provider of news to a provider of data.
Marije has decided not to publish her thesis online but she did announce to write a series of blog posts that touch on different aspects of her research. I really hope she does, because there are a lot of interesting topics in there. In the mean time she started updating the corpus she used for here research. At the moment the overview shows 248 visualizations, so if you are interested in interactives, bookmark this visualization vault!
Some people are better in keeping their promises than other. I for instance promised myself to update this blog more regularly. Well, take a look at the date of the last post… However, Eugene Tjoa promised to modernize Isotype by adding motion and interactivity to the excellent artwork of graphic designer Gerd Arntz and applying it to current statistics. He actually kept his promise, found some funding and received approval by the Gerd Arntz Estate to use the orginal drawings. He is documenting this project on interactive-isotype.org so please go over there and take a look at the first promising prototypes.
No other genre in journalism is more intertwined with infographics than the weather. It’s hard to find a newspaper or a news show that doesn’t use icons, charts and maps to forecast temperatures, wind speeds and the chance of rain.
Interactivity can add a lot of value to weather maps and charts, for instance by allowing you to zoom in on your own town, add layers of interesting information, drill down into historical data, or adjust the timespan of the forecast – to name just a few options. Examples of interactive weather maps are can be found all over the web, ranging from the nice an clean interface of the BBC to the elaborate dashboard by WheaterSpark.
Yesterday, Dutch public broadcaster NOS also introduced an interactive weather map… on television. It is presented on a huge touchscreen that is one of the main features of a brand new studio (as you can see in the video below, the presenter still has to get used to it). A clear case of remediation the other way round: this is not a new medium refashioning an old one, it’s an old medium paying homage to the new! Looking at the weather section of the website of the NOS there only one thing I don’t understand: why can’t we play with these interactive tools ourselves?
Semiotics is the study of signs. It is not an institutionalized academic discipline but a wide range of theories that are used by scholars from all kinds of fields, including linguistics, philosophy, psychology, sociology, and communication science. Semiotics is also a bit confusing, because it lacks a general accepted conceptual framework and prefers rather vague terminology. As one critic, cited in Daniel Chandler’s excellent Semiotics for Beginners, remarks: “semiotics tells us things we already know in a language we will never understand.”
Nevertheless, semiotics can provide be a valuable approach in analyzing the characteristics and attributes of icons, pictograms and infographics, as the nice and comprehensive overview by Ansgar Vollmer makes clear.
In the latest chapter of the Encyclopedia of Human-Computer Interaction, Clarisse Sieckenius de Souza goes one step further. Semiotics not only helps us analyzing signs, it can also teach us how to create better computer programs. Semiotic engineering is a software design strategy that considers computers to be media instead of machines. It underlines the importance of metacommunication, “communication about how, when, where and why to communicate with computer systems.” Translated to interactive infographics, semiotic engineering could be interpreted as another strong advocate for the importance of guidance, annotation and explanation. In the words of Sieckenius de Souza:
Since designers cannot be personally present when a user interacts with software, they have to represent themselves in the interface, using a specifically designed signification system, and subsequently tell the users what the software does, how it can be used, why, and so on.