Data Visualization for the Web

@philogb - Stanford ACM Tech Talks

I use Web Standards to create Data Visualizations.

@philogb

The Problem

@philogb - Stanford ACM Tech Talks

I wish I had someguidance when making

data visualizations!

InfoVis Theory

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

Channel Ranking vs. Data Type

PositionLengthAngleSlopeArea

VolumeDensity

SaturationHue

TextureConnectionContainment

Shape

PositionDensity

SaturationHue

TextureConnectionContainment

LengthAngleSlopeArea

VolumeShape

PositionHue

TextureConnectionContainment

DensitySaturation

ShapeLengthAngleSlopeArea

Volume

Quantitative Ordinal Nominal

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

Steven’s Power Law

InfoVis Tools

JavaScript InfoVis Toolkit

http://thejit.org/

JavaScript InfoVis Toolkit

http://thejit.org/

• The White House

• Mozilla

• Google

• The Guardian

• Al-Jazeera

A Hands-On Toolkit

PhiloGL

• WebGL Powered Visualization Framework

• Handles Big Datasets ( > 100K elems )

• Idiomatic JavaScript

• Rich Module System

Model courtesy of Nicolas Kassis - McGill Univ.

http://senchalabs.org/philogl/

Examples

http://senchalabs.org/philogl/

  //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 */    }  });

More Examples

http://senchalabs.org/philogl/

Thanks!

@philogb

http://philogb.github.com/