Exploring web standards for high data density visualizations

A sneak peek at an upcoming visualization session from the 2013 Strata Conference in Santa Clara, Calif.

Strata Editor’s Note: Over the next few weeks, the Strata Community Site will be providing sneak peeks of upcoming sessions at the Strata Conference in Santa Clara. Nicolas’ sneak peek is the first in this series. 

Last year was a great year for data visualization at Twitter. Our Analytics team expanded and created a dedicated data visualization team, and some of our projects were released publicly with great feedback.

Our first public interactive of 2012 was a fun way to expose how the Eurocup was experienced at Twitter. You can see in this organic visualization how people cheered for  their teams during each match, and how the tension and volume of  tweets increased towards the finals.

NB StrataSC 2013 image1

Some of our other projects showed the engagement on Twitter during the political campaign of 2012. This exploratory tool shows how people in each state of the U.S. reacted to and engaged with Obama’s and Romney’s Tweets. It was awesome to release this visualization because it provided context around the election-related conversation, specifically related to the messages that the candidates were sharing with the world. You can read more about this particular visualization in this blog post.

NB StrataSC 2013 image2

For these visualizations we used different web standards, mainly HTML/SVG and 2D Canvas. The graphics and animations scaled perfectly well. However, this also happened because we didn’t have high-resolution data graphics.

What happens when we want to show more data? A lot of this depends on how much data you’re working with. For example, for our Neil Armstrong Tribute we experimented with a web interactive visualization that would need to render 1.6 million points in space. This was our first take on it:

NB StrataSC 2013 image3

For this web visualization, some standards just didn’t scale. Creating 1.6 million SVG or HTML elements and animating them was out of the question. But how was this done, and what is the right way to choose the tools for visualizing large datasets on the web?

There’s a long list of criteria to consider before choosing the most appropriate standard. For example, details about the elements you want to display, which browsers to support, whether to build for mobile, etc.

My upcoming presentation at Strata Santa Clara will be about choosing the right standard to create your web visualization. We’ll cover each of the standards at a high level by building on a simple example. We’ll also show other exploratory and expository visualizations that we’ve made here at Twitter, as well as some of my personal projects to help you get a feel for what types of things can be done with each of these standards. I’m really looking forward to seeing you at my presentation!

Strata Conference Santa Clara — Strata Conference Santa Clara, being held Feb. 26-28, 2013 in California, gives you the skills, tools, and technologies you need to make data work today. Learn more
tags: , , , , ,