Interactieve datavisualisaties zijn razend populair, ook bij het grote publiek. Dat roept heel wat vragen op. Hoe ga je als ontwerper te werk? Welke tools gebruik je? Moet een visualisatie alleen functioneel zijn, of ook mooi? En hoe zorg je dat interactiviteit ook echt het begrip vergroot? Tijdens het seminar Datavisualisatie in Beweging hield ik over die vragen onderstaande presentatie.
One of the reasons for the increasing interest in interactive infographics is the fast growing popularity of data journalism. Although a simple search on Amazon shows that computer aided reporting has been around since the publication of Philip Meyer’s Precision Journalism in 1969, it is undeniable that data is the new buzzword in the newsroom.
This renewed enthusiasm is powered by the rapid proliferation of accessible numeric data on the web in combination with a growing number of tools to make sense of them without a degree in computer science or statistics. In the slipstream of the open data movement journalists around the world try to tell stories based upon numbers. If you’re new to the concept, read this explanation on the Guradian’s datablog, or watch Geoff McGhee’s outstanding interactive documentary.
Although I wouldn’t dare to call myself an expert in the field, I try to stimulate my students to experiment with data driven journalism. To get them on track, I offer them a simple workflow inspired by Paul Bradshaw’s Inverted Pyramid of Data Journalism:
- Start with a relevant question
(Why not pick one from the classic list of who, what, when, where, why, how, or how much?)
- Find and clean the data you need to answer this question
(If they’re not available anywhere, maybe you can create them yourself?)
- Analyse the data. Look for:
outliers (the best, the worst, the highest, the lowest),
differences (then/now, here/there, we/them), and
patterns (that weekly spike, the clustering in that region, the relation between those two variables)
- Explain your findings
(Data almost never answer the question why, so grab your phone and try to find some reasons)
- Tell your story
(What is the best genre to report your findings? How are you going to present your data?)
So what’s missing? Indeed, contrary to the inverted pyramid, there’s no separate step that says: visualize your data. That’s because in my opinion there are two different types of visualization involved in the process. Firstly, in stage three, you use all kinds of visual tools to analyze your data. These visualizations don’t have to be very sophisticated or well designed, as long as they help you to find your answers. Secondly, in stage five, you create a visualization that helps you to tell the story. That one has a different function and its visual and functional design should meet much higher standards.
In my classes, I simply refer to these different visualizations as type 1 and type 2. But after reading Tom Steinberg’s post from last week I think about renaming them to Answer Visualizations and Story Visualizations. Maybe these concepts can prevent starting data journalists from just presenting their own visual tools to the audience. Because in my humble opinion, that’s what a lot of them do. And that’s a pity, because on their own, without proper context, these ‘answer visualizations’ don’t tell any story at all.
This blog has been hibernating for far too long. I have promised myself many times to revive it, but there always were other and more urgent things to do: preparing workshops, teaching classes, reading theses, and, last but not least, changing jobs. But today a very nice e-mail from a Norwegian student told me that there are actually some people out there who look forward to new posts and that really is the best incentive you can wish for. So no more excuses, time to get interactive again!
Plenty to write about for sure. Interactive infographics are in the spotlight more then ever, data visualization really is in motion. That is exactly the name of a seminar I have organized together with Eugène Tjoa and Statistics Netherlands. On February 3th we will discuss the pitfalls and possibilities of interactive data visualizations. Among the speakers are Jerry Vermanen, who created a platform for Dutch data journalists, Thomas Clever, one of the founders of design bureau CLEVER°FRANKE, and freelance information visualizer Jan Willem Tulp.
No datavis conference without a datavis challenge. We provided three sets of data (about changes in the dwelling stock, consumer confidence and agriculture) and asked participants to use one or more of these sets to create an interactive visualization for a general public. We explicitly also invited designers with little experience.
The submission deadline closed last week so you can no longer participate. But you can take a look at the submissions. It’s fascinating to see how different designers, with different tools and techniques have created complete different interactives based on the same data. The jury has already made up its mind but feel free to share your thoughts. Which design do you like best? And, most important to me, what do you think about the use of interactivity?
Visual.ly is a nice website that collects examples of data visualizations. But it’s also a company that is building a tool that promises you to easily create sophisticated (interactive) infographics. In the Eager Eyes of Robert Kosara this tool holds no less then The Future of Data-Based Infographics. Read his crystal clear post and you can only agree:
The key difference between visualization and infographics is that the former is easy to automate and generic, while the latter are specific and usually hand-drawn. Now imagine a better way to create infographics based on data: a way that lets designers work with numbers more easily to create graphics that are visually exciting while still true to the data; a way that encourages and embodies best practices in visualization for designers. That’s Visual.ly.
The image below shows a mock-up of the tool. Note the Action palette at the bottom right. I, for one, am really looking forward to a working demo!
Sinds een jaar hebben wij een groen dak en daar zijn we erg blij mee: lekker warm in de winter en koel in zomer. Ook de gemeente is daar blij mee, want Amsterdam wil het aanleggen van groene daken graag stimuleren.
Toch is ons dak in de ogen van de gemeente kennelijk nog niet groen genoeg. De makers van de gisteren verschenen brochure MaxDak (pdf) vonden het nodig om met behulp van photoshop ons dak te voorzien van een batterij zonnepanelen. In de journalistiek is zoiets een doodzonde, maar de overheid vindt het blijkbaar geen enkel probleem om zonder toestemming of overleg met beelden te liegen. Wat zegt dat over de betrouwbaarheid van de rest van de brochure?
Remember when you went to high school loaded with a bag full of heavy textbooks? Well, those days are over. In this TED talk software developer Mike Matas demonstrates the tablet version of Our Choice, the sequel to Al Gore’s An Inconvenient Truth. And guest what, this full-length interactive book for the iPad features some very cool interactive infographics.
There are all kinds of reasons for adding interactivity to an infographic. After I asked Dutch designers what they considered to be the best interactives on the web, I questioned them about their ideas about the function of interactivity. An incomplete list of recurring keywords would look like this: to make a graphic more comprehensible or attractive, to keep it up to date or to add layers, to show relationships or change, to tell a story or to collect data, and, last but not least, to involve users. And involving users can be done by localization or personalization. In other words: to involve users with general data (demographics, for example) you could allow them to tweak the infographic to their own personal situation. And that is exactly what The New York Times did in this very clear interactive showing census data about U.S. households.
What are the most inspiring interactive infographics on the web? It was just one of the questions I asked Dutch infographic designers in a survey I conducted earlier this year. A total of 39 respondents together submitted 90 best practices, either entire websites or specific interactive infographics. Some of them are well known examples, others are nice surprises. These are the websites that contain one or more outstanding interactives according to at least two respondents.
The New York Times (17 mentions)
Not surprisingly the Grey Lady of journalism is the most often named as a source of inspiration when it comes to interactive infographics. Particularly the one about jobless rates for different groups (5 submissions) was praised: “phenomenal visualization”, “tells a good story, relevant for many people” and “brings you the information you want on a silver platter”. One designer commented: “Amanda Cox is really a super talent, along with the team at NYT she makes incredibly good graphics”. Some other interactives that were specifically mentioned are Is It Better to Buy or Rent? (“A complicated financial decision made very transparent”), Fractions of a Second: An Olympic Musical (“Very smart, in this case sound works better than image and elegant design”) and Tracking US Airways Flight 1549 (“Content and form perfectly match”). The election and census projects were submitted as well.
Nola.com (5 mentions)
The Times is what the French call hors concours. Interestingly enough the number two on the list is a specific interactive infographic featuring on a local newssite for New Orleans. Designers acclaimed the 2010 Oil Spill Gulf of Mexico interactive for its clear presentation of events: “Beautiful day-to-day overview of the disaster”. According to one respondent interactivity adds to the usability of this infographic: “You can determine how and in what pace to read the graphic.”
Gapminder (4 mentions)
The next one is more in line with expectations. Hans Rosling’s homage to visual statistics was nominated 4 times. According to Dutch infographic designers, Gapminder.org “brings statistics to life”. It’s “the best site for visualizing data”, “simple, but so much insight”. One respondent revealed: “You’ll never get enough of Gapminder. It gives you a completely different view of the world.”
CBS (4 mentions)
CBS stands for Centraal Bureau voor Statistiek, a semi-governmental institution responsible for collecting and processing public data about the Netherlands. Since a couple of years the bureau is experimenting with interactive visualization techniques resulting in a showcase both diverse in topics and types of visualization. According to one designer the CBS interactives are good examples of “functional design”.
BBC (3 mentions)
The good old Beeb defends the honor of the Brits. Specifically mentioned were the interactive visualization of a debate about the white working class (that looks a bit like Jonathan Harris’ We feel fine, that was submitted as well), the Interactive Body and a piece on the rescue of the Chile miners in 2010. Interestingly enough not one respondent mentioned The Guardian. Given its leading position in data journalism, I had expected this newspaper to be the number two on the list, right behind The NY Times. As proven by this very useful overview, they are definitely in the same league.
Graphic News (2 mentions)
Graphic News is a news agency dedicated to infographics, including interactives. The respondents who submitted this service both mentioned the sport graphics, maybe because they sometimes include live results that are updated automatically.
Google Maps and Google Body Browser (2 mentions each)
One could argue whether Google Maps is an infographic but according to two respondents the service at least is a good example for those who design interactives. The Body Browser was praised as “a nice way to display several layers”.
Prinsjesdag 2010 (2 mentions)
On Prinsjesdag the Dutch Queen addresses both houses of parliament and delivers the Troonrede (the speech from the throne similar to the State of the Union in the United States). The speech contains the political agenda of the government for the coming year. After that, the corresponding budget proposal is presented. Last year, the Dutch government used an interactive Checkbook of The Netherlands to explain the budget. Who knows, maybe that’s where some journalist picked up the idea ☺
Newsweek (2 mentions)
This interactive infographic of The Worlds Best Countries has featured on this blog before. It compares the world’s top 100 nations on topics like health, education and economy. As one respondent wrote: “A strong visualization based on an immense set of data.”
Information is Beautiful (2 mentions)
Another classic that was well appraised by the visualization community. This interactive balloon race compares the scientific evidence for over 100 nutritional supplements, from Fish Oil to Omega 3. It was recently updated.
Nikon (2 mentions)
As is clear from the entries above, the use of well designed interactive infographics is certainly not limited to newssites. Some of the best examples can be found on websites created by governments, NGOs or companies. This is also the case with the last two interactives that are submitted by more than one designer. Nikon did a nice job with Universcale, an ‘infinite yardstick’ that lets you compare objects from the neutron to a galaxy. “Well designed, although very complex”, one respondent remarks. “Narrative and explanatory”, the other adds. For similar interactives about the scale of our universe see this post about The Powers of Zoom.
FedEx (2 mentions)
Just like Nikon, FedEx uses data visualization to showcase its intellectual resources. Paying tribute to its commercial tagline – FedEx Delivers to a Changing World – the company offers a series of interactive cartograms that shows how exactly our world is changing on all kind of demographic topics. “Smooth movement, gives you the feeling you’re in control”, one designer writes. And that probably is exactly what FedEx aims at, because: who doesn’t want to be in control of our changing world?
Miss anything? Feel free to leave your own favorites in the comments.
Coincidentally, I had to explain the theoretical background of my thesis on several occasions during the last couple of weeks. Each time I found myself drawing the same sketch of the model I use to define some of the key concepts that are part of my research questions. So when I was asked to speak at the Dutch Infographics Congress 2011 about my research, I didn’t need long to decide what illustration to use.
But what do you do when you have to address more than 340 designers and all you have is a sketch with some boxes and arrows? In my case, I pretended never to have heard of Edward Tufte and his data-ink ratio and instead decided to spice it up a little. To revive this blog and save me some ink in the future, I might as well post it online. So, here it is:
Communication students and scholars will recognize Berlo’s S-M-C-R model. In this model a source encodes a message that is transferred through a channel to be decoded by a receiver. I have made several changes. First, I changed the label of the first box to sender, because the source of information doesn’t have to be the one who sends the message. Secondly, I use the plural receivers for the last box, because the model aims at one-to-many communication.
I also changed the label of the third box. In modern literature that one often is called the medium. But in my opinion, channel and medium are both ambiguous concepts that can refer to everything from the five human senses (sight, hearing, taste, smell and touch) to the classic mass media (print, radio and television). Therefore I prefer the word device, by which I mean a physical object that can present the message and/or allows for user input in some way or another.
Last but not least I consider the two boxes in the middle to be layers that can hold one or more items. So the device layer can consist of one device (for instance a newspaper or an iPad) or several (screen, loudspeakers, keyboard, mouse, joystick et cetera). The same goes for the message layer: it can contain one message (a single article, an infographic) or a thread of them (email, an online forum et cetera).
So how does this model help me to conceptualize my research? Well, in the end I’m interested in the effectiveness of interactivity: does an infographic become more useful when one adds interactive features? But before even trying to find an answer, I have to make clear what I mean by interactivity and effectiveness. The model above helps me to explain three things about these concepts:
1. There are three kinds of interactivity
For more than 30 years scholars have been debating whether interactivity is a technical feature of the medium (medium-interactivity) or a parameter of the communication process as a whole (human-interactivity). The model shows there are actually three kinds of interactivity:
- When the device layer not only presents the message but also allows for feedback, for instance by pushing buttons, gesturing or talking, it’s called user-to-system interactivity.
- When this manipulation of the system allows receivers to change the content or the form of the original message or create a reply, it is called user-to-message interactivity.
- When the changed message or the reply reaches the original sender, it’s called user-to-user communication.
Based on this trichotomy, I define an interactive infographic as an infographic that at least offers user-to-message interactivity (the manipulation of the form or content of the infographic). A small minority of interactive infographics also offers user-to-user interactivity.
2. Interactivity depends on four types of modalities
The second thing the model makes clear, is that there are four sets of parameters that have to be taken into account when studying interactivity:
- Representational modalities define how the message is encoded. Berlo describes a message in terms of elements and structures, semioticians use terms like sign systems and codes, and scholars of literature and art talk about style, grammar and genre. All these concepts are used to describe the way the message represents the data, knowledge or ideas the sender wants to communicate. In terms of infographics one could think of text, symbols, images, graphs, diagrams and maps as representational modalities.
- Output modalities are the different ways in which the device can present the representational modalities to the receivers. They are connected to the human senses. For infographics the most common output modalities are visual objects (the actual presentations of the representational modalities) but one could easily imagine interactive infographics that use sound or even sensory pulses.
- Input modalities are the ways in which the device allows for feedback. These are linked to human expression forms like touching, pushing, moving, gesturing, speaking et cetera. Examples are typing, clicking and scrolling (using a mouse), pushing and swiping (touch screen) or moving and tilting (motion sensing devices like the iPad and Wii remote).
- Manipulation modalities are the different manners in which the message layer lets the receivers change its content or form. Examples are browsing, showing, hiding, dragging, zooming, filtering and adding data.
Obviously these manipulation modalities are most important when it comes to interactivity. But with regard to the effectiveness of interactive features, it’s the combination of all four kinds of modalities that counts.
3. Effectiveness is in the eye of the beholder
The last thing the model illustrates is about effectiveness. In daily life, something is effective when it’s able to accomplish a purpose. But whose purpose? The sender encodes a message with a specific goal. He or she wants to inform, to persuade or to entertain the public. Or maybe the purpose of the message is to collect data. Often the function of a message will be a combination of several of these purposes. So the first challenge is to determine what exactly is the goal of the sender. The effectiveness of the message is determined by the degree to which these objectives are met. The second challenge is how to measure this degree.
But the receivers have goals of their own to participate in the process. According to the uses and gratification approach to mass communication they use media to fulfill their needs. Sometimes these needs will match the goals of the sender, but more often they won’t. Furthermore, receivers can have different needs. Maybe some of them want to be informed while others just like to be entertained. So when it comes to analyzing the effectiveness of an interactive infographic (or designing one for that matter) it is important to make clear from which perspective you look at it.
So that’s it. Maybe it’s not perfect, but it does what a model needs to do: it helps to define, explain and study a complex process in reality. As described above, the model is meant to explain one-to-many mediated communication. To make it useful for one-to-one or many-to-many communication settings, it should be made symmetrical by adding a device layer between the sender and the message layers as well. If you have any other suggestions how to improve it, please feel free to share your thoughts in the comments!
Andrew and Louis are two computer engineers from Minneapolis who wanted to know where their tax money went. So they collected the data and put them on WhatWePayFor.com. That are a lot of data. So now Google and art and technology center Eyebeam have created a dataviz challenge for designers to visualize how individual federal income taxes are spent by the US government.
To inspire potential participants the site offers some links to nice visualizations about the destination of tax money, including an interactive bubble chart and ditto timeline, but also an explanimation and the wonderful (but not very intuitive) tool to create a Better World Flux. Last but not least Jono Brandel from Google Creative Lab created an example visualization in HTML5 that allows American citizens to input their income and see how the government spends their dollars.
Who wants to join the competition has to know that the judges will be looking for “that wow factor, that addictive tool that shows us something we didn’t know, something that illustrates relationships, hidden stories, and simple facts in a way that is uniquely insightful to tax payers.” They will pay attention to storytelling, clarity, relevance, utility and aesthetics. There’s some controversy about the rule that the challenge only is open to “users who are physically located in the United States” but for me the most interesting part of the briefing consists of this “Note on Interactivity”:
We’re excited that the web is making it easier than ever to create interactive data visualizations, and we’re hoping that this challenge will produce some great interactive pieces. That’s why we’ve provided the API. However, before you start adding all the interaction you can imagine, think about what meaning an interaction brings to the piece and how best to convey that meaning.
(via Chart Porn)