This document provides guidance on data visualization for the web. It discusses using web standards to create data visualizations and introduces several JavaScript libraries for data visualization, including the JavaScript InfoVis Toolkit and PhiloGL. Examples of these libraries are shown and the document provides links to further examples on using them to create interactive data visualizations on the web.

1. Data Visualization for
the Web
@philogb - Stanford ACM Tech Talks

2. I use Web Standards to create Data Visualizations.
@philogb

3. The Problem

5. @philogb - Stanford ACM Tech Talks

6. I wish I had some
guidance when making
data visualizations!

7. InfoVis Theory

8. Semiology of Graphics
Source: Tamara Munzner. Chapter 27, p 675-707, of Fundamentals of Graphics, Third Edition, by Peter Shirley et al. AK Peters, 2009

9. Channel Ranking vs. Data Type
Quantitative Ordinal Nominal
Position Position Position
Length Density Hue
Angle Saturation Texture
Slope Hue Connection
Area Texture Containment
Volume Connection Density
Density Containment Saturation
Saturation Length Shape
Hue Angle Length
Texture Slope Angle
Connection Area Slope
Containment Volume Area
Shape Shape Volume
Source: Tamara Munzner. Chapter 27, p 675-707, of Fundamentals of Graphics, Third Edition, by Peter Shirley et al. AK Peters, 2009

10. Steven’s Power Law

11. InfoVis Tools

12. JavaScript InfoVis Toolkit
http://thejit.org/

14. JavaScript InfoVis Toolkit
A Hands-On Toolkit
• The White House
• Mozilla
• Google
• The Guardian
• Al-Jazeera
http://thejit.org/

15. PhiloGL
• WebGL Powered Visualization Framework
• Handles Big Datasets ( > 100K elems )
• Idiomatic JavaScript
• Rich Module System
http://senchalabs.org/philogl/
Model courtesy of Nicolas Kassis - McGill Univ.

16. Examples
http://senchalabs.org/philogl/

17. //Create application
PhiloGL('canvasId', {
program: {
from: 'uris',
vs: 'shader.vs.glsl',
fs: 'shader.fs.glsl'
},
camera: {
position: {
x: 0, y: 0, z: -50
}
},
textures: {
src: ['arroway.jpg', 'earth.jpg']
},
events: {
onDragMove: function(e) {
//do things...
},
onMouseWheel: function(e) {
//do things...
}
},
onError: function() {
alert("There was an error creating the app.");
},
onLoad: function(app) {
/* Do things here */
}
});

18. More Examples
http://senchalabs.org/philogl/

19. Thanks!
@philogb
http://philogb.github.com/