Leverage Interactivity to Build Better Visualizations

Data visualization is a powerful tool for exploring and explaining data. Visualizations typically leverage scale, position, shape, and color to convey meaning and understanding. While these facets represent the core of a visualization, the web offers an opportunity to incorporate interactivity, transitions, and movement.

When used effectively, these additional dimensions help users better understand a dataset by showcasing individual elements or key groups, demonstrating change over time, or communicating changes in scale. The examples and best practices shared below represent a sample of the myriad ways interactivity and animation can add value and clarity to data visualizations.

Showcase Elements and Sets

Perhaps the most immediate application of interactivity within data visualizations is the ability for users to drill deeper into datasets with a hover or click. This pattern is common across most interactive dashboards and charts and is built-in to tools such as Google Charts and Tableau.

This type of interaction is valuable because it provides additional context, allowing users to understand the details of a specific data point or group as it exists within a larger dataset.

Tooltips

As with images and text elsewhere on the web, hover effects can provide an opportunity to provide context and information

• This Upshot profile of Peyton Manning’s 2014 touchdown pass record leverages hover tooltips to great effect, allowing an initial version of the visualization to tell a clear story within a historical context without being muddied by extraneous data. Users can engage with the chart to see the names and final touchdown counts of notable quarterbacks with a simple hover.

Small Multiples

Small multiples provide a framework for presenting similar data across multiple charts for quick comparison. Augmenting these charts with hover interactions facilitates immediate comparisons of related data across charts.

• FiveThirtyEight’s presidential approval tracker allows users to quickly compare presidential ratings on a specific day and to see the associated data for all available presidents simultaneously.

Interactive Legend

In preparation for work with Research Affiliates, we created a prototype to demonstrate the level of responsiveness and clarity that hover effects can provide. In this specific example, hovering over the legend previews the associated dataset or highlights it if it is already visible on the chart. This approach provides a preview of available data, grants instantaneous insight, and lends clarity to the chart.

Animate Scale Changes

Animation can provide consistent context as visualizations shift in size and shape.

Zoom In / Zoom Out

Bloomberg’s ‘The Trading Game’ is a cross between a game and a data visualization.  It uses scale animation to ensure the stock price vertical scale remains somewhat constrained, animating smoothly as a the price spikes upward and downward. At the same time, the horizontal axis scales as time progresses to only show the trailing five months.

Linear vs Log

In cases where different axes scales may be valuable, animating between states can help users better understand the implications of a scale change. This d3.js block shows this principle in practice. Note that the data points animate smoothly as the scale changes.

Animate Between States

A single chart rarely tells a full story about a dataset. In most cases, a selection of related charts yields a more complete narrative. Animation between these states can help to anchor elements that are consistent between them while highlighting the shifts in presentation between each.

The NYT Upshot’s 3-D View of a Chart That Predicts The Economic Future: The Yield Curve is a shining example of this approach. The desktop version of the site presents a linear narrative through various chart views, shifting between 2-D and 3-D representations alongside curated annotations. Animation between these states helps users understand the relationships between each chart. Viewing this chart on a smaller screen or mobile device yields a static, scrolling experience that is notably more difficult to follow.

Research by Jeffrey Heer and George G. Robertson shows additional examples of animation between chart types. They found “significant advantages for animation across both syntactic and semantic tasks, providing strong evidence that, with careful design, animated transitions can improve graphical perception of changes between statistical data graphics.”

Animate Across Time

The interactions and animations reviewed so far have helped to convey context to users. Animating data across time can contribute new meaning entirely by adding a dimension (time) to the visualization.

Perhaps the most famous example of this technique harnessed to great effect is Hans Rosling’s presentation of global health and economic data using Gapminder’s bubble chart tool. Rosling leverages the power of the time dimension in his presentation to tell compelling stories about individual nations and broader trends within a global context.

In a similar way, Noah Veltman’s animated visual of NFL player sizes from 1920 to present provides an immediate, impactful understanding of the NFL’s shift toward larger players and the bifurcation of player shapes by position.

It’s important to note that in both of these examples, the animation is used to support a clear and concise narrative. Rosling verbally explains the animations himself, drawing the audience’s attention to points of interest. Veltman’s NFL example tells a simple, clear story from start to finish and allows the user to manually scrub forward and backward in time.

Research suggests that people find these types of timeline animations appealing but that this approach can prove less effective than other types of visualizations (such as small multiples) in helping them actually understand the data.  Visualization researchers from Georgia Tech describe this caveat:

Presenters showing animated data should strongly consider ensuring that their data tells a clean story: this can be confused by having too many data points, by data points that reverse their tracks over time, or by having points that do not move in synchrony.

In summary, using time as a dimension within a visualization can make for powerful stories and compelling experiences, but tread with caution.

Conclusion

Interactivity can make data visualizations more compelling, more clear, and more valuable. The examples and approaches above are just a few of the ways that interactivity and animation can improve a visualization.

We’ve incorporated these concepts into work for Dick’s Sporting Goods, Research Affiliates, JUST Capital and others, and are always on the lookout for other great examples. Share your work or your favorite inspiration in the comments, or consider joining the Viget team to design or build data visualizations with us!