Twitter's Miguel Rios on Choosing Viz Methods

Event viz svg Canvas WebGL HTML SVG OpenVisConf Twitter’s Miguel Rios on Choosing Viz Methods

In our second dispatch from OpenVis Conf, Rios considers four major options

In his talk last week at OpenVis Conf, Miguel Rios, who leads the Visual Analysis & Insights team at Twitter, walked through four major options for viz on the web—HTML/CSS, SVG, HTML5 Canvas, and WebGL—using real-life examples to create a simple rubric for choosing the most suitable format.

Rios divided the four options into two categories: those that retain a sense of drawn objects that can be individually manipulated (HTML/CSS and SVG) and those that flatten drawn objects into a single layer (Canvas and WebGL). Using the Tilt 3D Firefox add-on, he offered a 3D view of the four formats to clarify their underlying structure—and show which objects are preserved as objects in each:

The Tilt view of Ortiz's four visualization options shows that Canvas and WebGL flattens drawing objects into a single layer, while HTML/CSS and SVG preserve them as manipulable objects

The Tilt view of Ortiz’s four visualization options

How to Choose

To decide which technology is best suited for a new visualization project, Rios suggests that developers ask themselves a series of questions:

  • How many elements are in the visualization?
  • How complex are the elements?
  • Is it going to be interactive?
  • Will it have animations or transformations?
  • Do you need to support legacy web browsers?
  • Are there related open source examples or frameworks?

Rios underlined the last question as the most important, and exhorted developers to decide that “the answer is always yes whatever you have to do.” With the huge library of open source resources that are available, plus resources like Stack Overflow and Google Groups, there is never a reason to start from nothing: “instead of starting from scratch, start from search and find examples to help you.”

So how do these questions—and their answers—play out in actual projects? Rios walked through three examples from his team to demonstrate.

Which Method When?

Example 1: Election Engagement Map

Twitter's engagement map for the 2012 US Presidential election showing user engagement with tweets from the candidates, by state

Twitter’s HTML/SVG-based engagement map for the 2012 US Presidential election

Twitter’s election map uses HTML and SVG, which Rios discussed as a good choice for visualizations with a small number of elements, those with complex shapes, and those that need to be interactive.

Visualization characteristics

Attribute Elections Map Example 2 Example 3
Number of elements Low
Complexity of elements High
Interactivity? No
Animations? No
Browser support IE7+
Open source resources d3.js
Standard HTML/SVG

Example 2: Japan Earthquake Tweet Map

Map showing the (metaphorical) path of tweets sent from Japan and retweeted by users in other locations immediately after the Sendai earthquake

Rios’ map of tweets from Japan and their retweets from around the world

Rios and his team created a tweet map after the 2011 Japan Earthquake showing retweets of messages originating in Japan (video). Because the team was creating a visualization of each tweet’s path around the world (not every tweet, but a very large number of them), they chose to use Canvas. “SVG was a resource-hog,” Rios said, “and very slow when we draw the path of a tweet.” Canvas, on the other hand, is ideal for “small-to-relatively-large number of elements and animations.”

Visualization characteristics

Attribute Elections Map Japan Earthquake Example 3
Number of elements Low Large
Complexity of elements High Low
Interactivity? No Yes
Animations? No Yes
Browser support IE7+ Latest
Open source resources d3.js processing.js
Standard HTML/SVG HTML 5 Canvas

Example 3: Neil Armstrong Memorial

After Neil Armstrong’s death, Twitter’s Visual Analysis & Insights team wanted to create an appropriate memorial using the 1.4M tweets about his life and legacy that were written in the hours following his passing. They decided to map a sample of tweets from around the world, representing each as a single light on a rotating globe. They chose WebGL, which Rios considers “great for small-to-very-large number of elements, complex shapes, animations, [and] 3d visualizations.”

Visualization characteristics

Attribute Elections Map Japan Earthquake Neil Armstrong
Number of elements Low Large Large
Complexity of elements High Low High
Interactivity? No Yes Yes
Animations? No Yes Yes
Browser support IE7+ Latest Latest
Open source resources d3.js processing.js PhiloGL
Standard HTML/SVG HTML 5 Canvas WebGL

Bonus Example: Twitter Conversation Map

Ortiz's map showing at-reply connections between Twitter employees

Santiago Ortiz’s Canvas-based map of Twitter conversations

Finally, Rios demoed a visualization by Santiago Ortiz of conversations between employees of Twitter and cited it as a smart use of Canvas because it necessarily included many elements that needed to be queryable on hover.

comments powered by Disqus