Looking forward to the Infographics Creation Tool

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!

Gemeente Amsterdam photoshopt groene daken

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?

Your own personal infographic

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.

Best Interactive Infographics on the Web (according to Dutch Designers)

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.

Interactivity, a model

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:

  1. 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.
  2. 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.
  3. 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:

  1. 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.
  2. 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.
  3. 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).
  4. 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!

Before adding all the interaction you can imagine, think!

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)

How far would kids walk for cannabis?

The Netherlands are famous for their coffeeshops, places where one can buy cannabis for personal consumption without being bothered by the authorities. However, the Dutch government is planning new legislation that will force coffeeshops located within 350 meters of a school to close. Some of my students are reporting about the results of these plans for the coffeeshops in the city of Leiden. A nice opportunity for me to play around with the Google Maps API.

The map below shows all coffeeshops, elementary schools (in red) and high schools (blue) in Leiden. By hovering over the schools you can see which coffeeshops are within the 350 meters zone and would have to close. You can also have all perimeters revealed at once to see that just one of the 11 existing coffeeshops will survive when the rule will be applied to both elementary as high schools, whereas just one none of them has to close down if the rule will only affect high schools. It’s not yet clear how the new law will calculate the 350 meters but in this mashup they are measured in a straight line, not as the actual walking distance from the school to the coffeeshop.

Of course the map doesn’t answer all kinds of interesting questions. Like how far school kids would walk to get their cannabis. Or where they are going to buy their drugs when the coffeeshops are all closed. Nevertheless it would be very interesting to create a similar map for Amsterdam (over 200 coffeeshops) or the entire country. If you have suggestions for improving this interactive, feel free to share them in the comments!

Let’s go inside infographics

How do you get the user inside your infographic? That is the main topic of the 4th edition of the Dutch Infographic Conference held on March 4th in Zeist, The Netherlands. Keynote speaker will be Gert Nielsen, founder of visualjournalism.com. John Grimwade will be talking about information design and the Tablet Revolution. The rest of the line-up consists of Dutch experts but don’t let that withhold you because all non-English speakers will be translated simultaneously. Headsets are freely available.

As a matter of fact I’m one of these speakers myself. I will present some preliminary results of a survey about interactivity I conducted among Dutch infographic designers. So if you’re interested in interactive infographics and you happen to be in the neighborhood, be sure to drop by in Hotel Theater Figi. Registration started last Friday, an early bird rate of € 100 is available until February 7th.