Start →

Dataviz ♥ Web

Exploring Web Graphics APIs for Data Visualization

@miguelrios, Twitter Inc.



  1. Brief overview of Web Graphics Standards and APIs.
  2. Real life examples.
  3. Basic guidelines.

Plenty of Options

  • SVG
  • HTML5 Canvas
  • WebGL

Retained Drawing


Photo credit: kbeil on Flickr.

Immediate Drawing

(Canvas, WebGL)

Photo credit: protoflux on Flickr.

SVG Example



SVG Example (using d3.js)

// append svg to parent div.
var svg ="#example-svgd3").append("svg")
  .attr("width", 300)
  .attr("height", 300);
// append a circle to the svg element.
var circle = svg.append("circle")
  .attr("cx", 150)
  .attr("cy", 150)
  .attr("r", 100)
  .style("fill", "#1f77b4");

SVG Animation (using d3.js)

// animate the circle radius from 100 to 10 pixels.
  .attr("r", 10)

Canvas Example

// retrieve context from canvas.
var canvas = document.getElementById("dot-example");
var context = canvas.getContext('2d');
// draw circle inside canvas.
context.arc(150, 150, 100, 0, 2 * Math.PI, false);
context.fillStyle = "#1f77b4";

Canvas Animation

var r = 100;
var interval = setInterval(function(){
  r = r - 1;
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.arc(150, 150, r, 0, 2 * Math.PI, false);
  context.fillStyle = "#1f77b4";
  if(r == 10){

Recap - Retained vs. Immediate


2012 U.S. Elections Map

Engagement of tweets sent by the Presidential Candidates for the 2012 elections.

Elections Map

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


Good choice for small number of elements, complex shapes, interactive visualizations.

2011 Japan Earthquake

Visualization of tweets directed at, or posted by, users from Japan, retweets and reach of those tweets.

The path of a tweet

Trail: SVG vs. Canvas

Japan Earthquake Viz

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


Great for small-to-relatively-large number of elements and animations.

Neil Armstrong's visualization

Retweets from @NASA's tweet about Neil Armstrong passing away.

Neil Armstrong Visualization

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


Great for small-to-very-large number of elements, complex shapes, animations, 3d visualizations.

Before diving in, ask yourself:

  • How many elements in the visualization?
  • How complex are these elements shaped/arranged?
  • Is it going to be interactive?
  • Will it have animations or transformations?
  • Do you need to support older web browsers?
  • Are there related open source examples or frameworks? Spoiler: yes.

Graph of Twitter Employees

Conversations between Twitter employees.
By Santiago Ortiz (@moebio)

Don't let frameworks and APIs limit your visualizations.

Be creative.

Fork this talk, make it better.