Adding Interactivity to Data Visualizations on the Web
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.
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.
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.
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).
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).
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:
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.
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.
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:
And on the other side, here’s their exploratory dashboard with more detailed data:
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:
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:
- Does the animation cause confusion? If motion makes data hard to read, that’s a pretty good sign it shouldn’t be there.
- 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.
All online tasks do not carry the same weight. Find out how to design a good user interface for critical tasks in everyday life.