Interaction Design for Data Visualizations

Interactive data visualizations are an exciting way to engage and inform large audiences. They enable users to focus on interesting parts and details, to customize the content and even the graphical form, and to explore large amounts of data. At their best, they facilitate a playful experience that is way more engaging than static infographics or videos. Here are several ideas and concepts of interaction design for data visualizations and interactive websites, using 11 examples from the web.

1.    The Basics: Highlighting and Details on Demand

Highlighting and details on demand are interactions that are useful for almost all data visualizations.

Highlighting

The Evolution of the Web is a great example of how highlighting can support the user in focusing on certain parts of the visualization. The colored, curved web feature lines and the browser lines are emphasized on mouseover, allowing the user to see when a feature was adopted by the different browsers.

 

Details on Demand

The UEFA EURO 2012 Tournament Map interactive shows a rich popup window when the user clicks on games, groups, teams or stadiums. Each popup contains detailed information such as an article headline and quotes for a game. It provides links for further in-depth exploration and gives the user the opportunity to post to social media.

 

2.    Making More Data Accessible: User-driven Content Selection

A major advantage of interactive visualizations is that the content can be changed by the user. The main part of such a configurable visualization becomes the template through which different structurally similar data sets are displayed, and additional controls allow the user to change what data gets displayed. When used in such a manner, an interactive visualization can make a much larger data set accessible than a comparable static graphic.

Incremental content changes

In the How Many Households Are Like Yours? interactive by the New York Times, the user can select the household type by choosing a primary resident and adding or removing additional residents. For each change, the information shown in the visualization is updated, giving immediate feedback about the change. This interaction makes data about many different household types accessible without being overwhelming. A nice detail is the graphical representation of the different residents.  

Drill Down

The different expenditure categories in the Where Does My Money Go? interactive are shown as bubbles in a hierarchical, circular drill-down navigation element. When the user selects a child, sibling, or parent expenditure category bubble, the navigation element zoomed to the selected bubble. The bubble sizes represent the expenditure amounts.

 

3.    Showing Data in Different Ways: Multiple Coordinated Visualizations

A single graphical representation typically only shows a few dimensions at once and in a particular way. For example, maps emphasize geographic location and timelines the flow of time. Those commonly used representations also often have well-known interactions such as pan and zoom for maps. By assembling multiple standard parts and coordinating them, you can show different aspects of the data set at the same time.

Content Filtering with Control and Dependent Visualizations

The How Riot Rumours Spread on Twitter visualization by the Guardian uses a line chart as a control for the content of a bubble chart. The line chart shows the rumour-related tweets per hour over time and highlights important events. The bubble chart shows the different tweets, their relation to the rumour and their influence. The user can play the visualization as an animation and directly interact with it. The interplay between line and bubble chart enables the user to explore interesting points in time, e.g. to see the proportion between supportive and opposing tweets when the number of rumour-related tweets started to decline.

In CNN’s Home and Away interactive, the user can filter the casualties that are displayed on the home and away maps by age, location and date, using multiple control bar charts at the bottom of the visualization. The intersection of the filter settings is applied. Similar to the Riots visualization, this one immediately updates while the user is dragging the sliders, enabling rapid content exploration (dynamic queries). Selecting a location also updates the area shown in the home map.

 

Highlighting and Selection Across Multiple Visualizations

In my visualization of deadly earthquakes, I used synchronized selection and highlighting across a map, a timeline and a bar chart. Users can explore how earthquakes are distributed geographically and over time, by their magnitude and by the number of casualties. By selecting one set of earthquakes and highlighting another one in the bar chart, users can also compare spatial and temporal distribution of these two sets.

 

4. Showing Data in Different Ways: User-driven Visual Mapping Changes

Multiple coordinated visualizations show multiple perspectives on the data at the same time – leaving less screen real estate available for each visualization. Allowing the user to reconfigure the mappings from data to visual form (visual mappings) for a fixed visualization type is an alternative that can help in maximizing the visualization size.

Choosing Pre-Defined Visual Mappings

The Flooding, Power Failures, Rainfall and Damage from Hurrican Irene interactive by the New York Times provides four different map settings that the user can choose from. When the user selects a different setting, the data and the way it is projected onto the visualization layer of the map changes. The map, including the path of the hurricane, and the story next to it provide a constant frame of reference.  

User-Driven Visual Mapping Changes for Visual Properties

In the visualization of crowd documentation that I created as part of a research project, the user can select the data that is displayed for area and for color from a fixed set of data attributes and operations. The color scale can also be adjusted in a similar way. With this approach, more configurations can be tried out by the user compared to the pre-defined mappings approach — at the expense having less directed storytelling and some potentially useless or confusing setting combinations.

 

5.    Integrating Users’ Viewpoints and Opinions

Engaging users by allowing them to enter their own viewpoints and opinions into a visualization is the aspect of interaction that excites me the most. By merging the data display with the user’s personal viewpoints, the visualization becomes a more central part of the user’s reasoning process on the displayed topic.

User Viewpoints: Weighting Metrics

The OECD Better Life Index visualization lets users rate the importance of different topics, such as housing, life satisfaction or education, to create personalized rankings of OECD countries. The measures for each topic are weighted by the user’s importance rating. The personal importance ratings can be compared to those of different demographic groups, and the personalized ranking can be shared on social media.

 

Integrating User’s Projections

The 2012 Election Dashboard by the Huffington Post has a section where the user can project the outcome for the different states. By clicking on each state multiple times, the user can change his forecast between Obama, Romney, and undecided.

  Interaction plays a crucial role in data visualization design. There are many more than just these 11 ways in which interaction can be used, and understanding interaction in visualization is an active research topic. If you’d like to learn more about interaction in visualization, a good place to start are these two papers: “Toward a Deeper Understanding of the Role of Interaction in Information Visualization” by Yi et al. and “Interactive Dynamics for Visual Analysis” by Heer and Shneiderman. Lars Grammel is a PhD candidate at the University of Victoria. He researches how everyday users can be supported in data visualization and analysis. You can follow him on Twitter @lgrammel and on Visual.ly lgrammel.