Features:
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
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 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
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
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.
People
Credits
-
Erin Kissane
Editor, Source, 2012-2018.
