An Article

Adding Interactivity to Data Visualizations on the Web

Nick Walsh By Nick Walsh // 7.22.2020

Visualizations on the web allow user exploration through interactivity. A hands-on medium, after all, begets hands-on graphs.

Charts in motion can provide context, clarity, and discovery — but their value comes from implementations that are measured and deliberate. And just like producing a movie versus taking a photograph, they have a penchant for adding time and complexity to a project. To that end, we’ll be taking a look at common types of interactivity, their drawbacks, and tips to keep in mind.

Key Uses of Visualization Interactivity

There’s no shortage of ways to break a visualization free from a static existence, but the ocean of possibilities is an overwhelming place to start. Pulling examples from my reference Observable notebook, let’s work through six of the most useful options.

Scatterplot showing the top 20 goal scorers in the 2019–2020 English Premier League season, as of July 1, 2020

We’ll start with this scatterplot, which shows the top 20 goal scorers in this season’s English Premier League (as of July 1, 2020). The x-axis denotes goals, the y-axis shows minutes played, and the leading player earns a label on their plot (congrats, Jaime Vardy).

Swapping a Dataset or Unit

The first — and most straightforward — interaction we can introduce is a simple data swap. Here’s what happens if we’d prefer to switch things out for Spain’s La Liga.

Animation switching the scatterplot to show the top 20 goal scorers in Spain's La Liga
Swapping to Spain’s La Liga

Alternatively, rather than swap the data entirely, the units being measured can also be changed out. Reverting to our starting league, let’s go from goals to a combined tally of goals and assists, unveiling a new leader.

Animation changing the scatterplot x-axis from goals to goals + assists
Swapping to Goals + Assists

Filtering a Dataset

Beyond wholesale swaps, data that’s already present can be limited by filters. For our goal scoring example, that could mean adding controls including:

  • Thresholds for minutes played, like only players with less than 1000 minutes.
  • Time constraints, like goals after the winter break.
  • Team selection, like members of the top 20 from the champions, Liverpool (shown below).
Filtering the scatterplot to show players from Liverpool
Filtering to Liverpool

Toggling Visualization Features

Adding supplemental data to a chart can range from useful to distracting, depending on the audience. If a feature is only helpful to some, consider a toggle.

On our example chart, we’ll enable a 1 per 90 reference line: Players under the line roughly average a goal or assist (1) per game played (90 or so minutes).

Adding a reference line to show the rate at which a player would be averaging one goal or assist per game
Under the Line = One Goal or Assist Per Game

Chart Combination or Separation

The amount of information represented informs the next interactivity, combining or separating graphs. If the chart is dense, for instance, separation would be a neat trick: A chart for each team, arranged in a grid.

With the quantity of data our sample is showing, combination is key for simplified comparisons. Here’s what happens if we drop both leagues in:

Showing both leagues in the same scatterplot, overlaid
Combining Both Leagues

Providing More Information

The leading player has been granted the gift of a label, but it stands to reason that users may want to figure out who the other dots represent. Informational panes, tooltips (demonstrated below), and other means of selection can add some exploratory friendliness to a visualization.

Adding tooltips when a user hovers over a plot for more player information
Tooltips for Each Plot

Zooming and Changing Level of Detail

Clustered data can be super useful from a macro level, but actionable insights also rely on the ability to zoom in. Seeing a globe is great, but not if you’re trying to get directions to a restaurant.

Switching gears a bit with our example, here’s a Chrome performance audit. These charts are invaluable in tuning a website — a lot of loading, processing, painting, rastering, and rendering goes into displaying an application, and the performance audit is a diagnostic tool for breaking those things down. Across the top, we can see all of the browser’s actions for a recorded period. To see a specific segment in more detail, we can zoom in (here, the selection is called brushing) and consult the linked charts below as they change.

Brushing a portion of a performance audit, zooming several charts at once
Brushing a Performance Audit

Shortcomings of Explorative Elements

With our six primary interactive building blocks top of mind, it’s time to cover the key visualization-related concerns.

Assume Interactivity Will Go Unused

Each bit of interactivity or customization added to a chart should come with an assumption: Most users will skip it completely. Dominikus Baur’s article, often quoted in visualization circles (in addition to articles of our own), cites that The New York Times saw only 10–15% of users take advantage of interactive elements.

It’s certainly a strike against the time and effort that goes into the extra elements, but follow-up articles have continued to defend benefits like deeper data exploration and trust in your data analysis.

Avoid Hiding Key Insights

Going one step further with unused controls: Make sure the chart’s default state tells your story. Starting our example with goals on the x-axis doesn’t make a good case if we’re petitioning for goals plus assists leader Kevin De Bruyne to win Player of the Year.

Don’t Rely on Hover

Touch devices, clustered data, and small plots make interacting with individual points an awkward proposition. Additional interactive means are typically necessary, like:

  • Swapping to list view
  • Zooming within a cluster
  • Hoverable regions with a Voronoi mesh (as seen in this Nivo example)

Optimize Data Performance

Exploration relies on convenience, and we’ve all abandoned sites that took too long to sort themselves out. Ensure that all of the data swapping, filtering, and feature adding we’ve been covering so far is as snappy as possible to encourage use.

Tips for Interactive Elements

As interactive features make their way into visualizations — and the shortcomings have been covered — here are a few new areas to explore.

Split Exploratory and Explanatory with Design

Charts tend to fall into two camps: Exploratory (the examples in this article so far) and explanatory (something like a static executive summary). Beyond one-has-buttons-and-the-other-doesn’t, design cues can help highlight the difference, too. Color palette swaps, different framing or sizing, entry animations, and a host of other tweaks point out graphs with interactive flair.

On the explanatory side, highlighted data is king. As an example, here’s the Florida Department of Health’s summary for COVID-19 cases:

Snapshot of the Florida Department of Health's COVID stats

And on the other side, here’s their exploratory dashboard with more detailed data:

The full COVID data dashboard for the Florida Department of Health

Give the Axes Careful Consideration

Adding motion requires extra attention to paid to the corresponding axes. Fitting our reference marks to the current data means we’re pulling the rug out on users when the data changes, like this revised example of swapping leagues:

Animation that shows the league swapping without a fixed x-axis, causing the reference numbers to change.
Without a Fixed X-Axis

Despite both Vardy and Messi occupying the far right, it’s difficult to compare the two as the axes change. For this chart, it makes more sense to set a range based on both sets of data, like our original demonstration:

Remember That Animation is Informational

Animation is a specialized visual language of its own, and its effect on visualization is a field of study unto itself. As a starting point, it helps to track two questions:

  1. Does the animation cause confusion? If motion makes data hard to read, that’s a pretty good sign it shouldn’t be there.
  2. Does the animation make sense? Initially, when we switched between league data in our examples, the same 20 plots were used for both. Fun for animation, but it didn’t make sense in actual use.

Add Complexity With Steps

Simplicity is great, but some charts are complex because they need to be. When the right chart is a bit intricate, it helps to introduce features in steps — often with explanations, like this classic Tampa Bay Times report.

A Complex, Medium-Defining Capability

Interactivity is the defining feature of charts within the web context, elevating them from images to explorable troves of information. Like most things in a browser, there are drawbacks, trade-offs, and special considerations; equipped with the six primary means of adding interactivity, though, we’re able to tackle most feature needs.

If you haven’t already taken a peek, visit my D3-powered live notebook with the examples used throughout this article.

Next Up

Designing Interfaces for Critical Tasks

Ayana Campbell Smith By Ayana Campbell Smith // 7.20.2020

All online tasks do not carry the same weight. Find out how to design a good user interface for critical tasks in everyday life.