Data visualization for the web
Upcoming SlideShare
Loading in...5
×
 

Data visualization for the web

on

  • 1,982 views

 

Statistics

Views

Total Views
1,982
Views on SlideShare
1,978
Embed Views
4

Actions

Likes
3
Downloads
16
Comments
0

1 Embed 4

http://localhost 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Data visualization for the web Data visualization for the web Presentation Transcript

  • 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 GraphicsSource: 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 TypeQuantitative 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 VolumeSource: 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 A Hands-On Toolkit • The White House • Mozilla • Google • The Guardian • Al-Jazeera http://thejit.org/
  • 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.
  • Exampleshttp://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!@philogbhttp://philogb.github.com/