The Rise of Interactive Data Visualization

The visualization below highlights something only recently possible on the web: a dynamic, interactive canvas. Titled “Disaster Strikes: A World In Sight”, it visualizes a century of floods, fires, droughts, and earthquakes around the globe. (Below is a snapshot of 1996, an apparently costly year for disasters).

It’s not a passively animated graphic, but one that users can actively engage with, freezing or pivoting dimensions to reveal new views of the data. It’s a harbinger of a new class of documents, which digital publishers are beginning to embrace, to provide a richer information experience for readers.

Meet the Interactive Frameworks

That the above graphic could be built in a single weekend (it was part of a larger hackathon called Data In Sight that Barret Schloerke and his team 13 participated in) is testament to the maturity of tools available.

In the last few years, there has been a blossoming of frameworks for creating rich, dynamic infographics. These include Processing (and Processing.js), Adobe Flex, Raphael, Prefuse and Flare, Protovis, and now D3, among others.

These frameworks present new possibilities for data visualization, but also challenges. Expose too little interaction, and one risks being little different than a static visualization. Expose too much interaction, and the user is overwhelmed by a jumble of buttons and sliders, with no clear narrative path.

Used well, interaction is a means to escape flatland. In the Disaster Strikes graphic, for example, it is used to encode an additional two dimensions of data (disaster metric and time) beyond the three that are possible with a heatmap (in this case, country and disaster class on the axes, and magnitude at points inside the matrix). This allows the graphic to express five dimensions of disaster.

The Disasters heatmap leveraged two tools that are also used internally at Metamarkets:

• D3 (short for “data driven documents”) – the sequel to Protovis
• DVL (short for “dynamic visualization LEGOs”) – a framework for building event-driven web pages, developed by our very own Vadim Ogievetsky

The short but painful history of several rich web toolkits provides lessons to one’s choice of interactive visualization tools: choose those that work well with web standards and the DOM. This favors Javascript frameworks, such as Processing.js and D3, over those that may rely on browser plug-ins (yes, I am biased about Javascript).

Next I turn to some of the challenges of designing interactive visualizations, namely working with time, revealing stories, and surfacing state.

Visualize Time as a Flow, not a Flicker

Evolving a visualization in time is a powerful technique that should used with care. Displaying discrete jumps of data over time can be disconcerting for a viewer, making it hard to follow patterns. One valuable way to address this challenge is to smear time: let events fade into the past, rather than showing only a fast flicker of the present. Providing a ghosting of the recent past, where data flows, can provide a wider temporal context for otherwise diffuse events (as is often the case for points on a map). This has been used with success by Aaron Koblin’s Flight Patterns as well as Stamen Design’s Cabspotting.

Visualizing data as a flow is more than just aesthetically pleasing; recent work by Colin Ware suggests it may be a better way to encode temporal data, given our eyes’ natural aptitude for perceiving continuous contours.

The Power of Story, The Joy of Discovery

John Lasseter of Pixar has said “No amount of great animation will save a bad story.” Likewise, it isn’t enough for data visualizations to look beautiful: to succeed, they must tell a compelling story.

In the case of dynamic, interactive visualizations, this can be a challenge. Most possible states of a visualization are simply uninteresting. The key for the information designer is to constrain exploration along paths that are most likely to yield insights. Most data are sparse and long tailed, so curating and narrowing dimensions (don’t let outliers warp your axes) can help restore some information density.

For an example of this, witness the New York Times visualization of Netflix Queues . Rather than a full choropleth of the United States, twelve metropolitan areas were preferentially selected, and a set of movies with distinct rental patterns were helpfully linked to at the top of the page.

Applying algorithms to reorder the data, such as placing similar data points together, can also help guide users towards discovering patterns. The Disaster Strikes visualization includes a “cluster” button which executes a bivariate clustering algorithm in Javascript, revealing countries that have suffered similar kinds of disasters (Korea, Ecuador and Guatemala all suffer from tropical storms).

The upside of a visualization with an exploratory state space is that users experience the joy of discovery. Jeff Heer’s Sense.US allowed users to explore US Census information over the past century and debate the meanings of discovered trends.

Encoding State with a Stateless Protocol

One important point in such visualizations is that state be encoded in the browser URL. When you find something interesting, for example that 1996 was a bad year for bacterial outbreaks, you should be able to share it. Updating the base URL is not wise, as it would require a painful reload of the page for each interaction. The recommended approach is using a hashbang fragment (but be careful), which can be detected to set the visualization to the proper state.

The Disaster Strikes visualization does not surface state yet, but I expect with more time it would have been implemented, and we make extensive use of this with our internal dashboards.

Progress, In Sight

The field of interactive visualization is still nascent, but this weekend’s event was testimony that static visualizations are likely to go the way of printed books. Though “interactive” was just one of the four award categories, every single team I witnessed on Sunday showed what would be considered an interactive, dynamic visualization.

Some final notes about the competition: The world disaster data, as well as other data sets that were eligible for use at the hackathon, are available at this special InfoChimps page. . One specific winner can be seen here, and the full set of winners can be seen at the Data Insights home..

Interested in creating data visualizations like this one? Come join the Metamarkets Team.