Data visualization for the web

2,350 views
2,252 views

Published on

Published in: Education, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,350
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Data visualization for the web

  1. 1. Data Visualization for the Web @philogb - Stanford ACM Tech Talks
  2. 2. I use Web Standards to create Data Visualizations. @philogb
  3. 3. The Problem
  4. 4. @philogb - Stanford ACM Tech Talks
  5. 5. I wish I had someguidance when making data visualizations!
  6. 6. InfoVis Theory
  7. 7. Semiology of GraphicsSource: Tamara Munzner. Chapter 27, p 675-707, of Fundamentals of Graphics, Third Edition, by Peter Shirley et al. AK Peters, 2009
  8. 8. 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
  9. 9. Steven’s Power Law
  10. 10. InfoVis Tools
  11. 11. JavaScript InfoVis Toolkit http://thejit.org/
  12. 12. JavaScript InfoVis Toolkit A Hands-On Toolkit • The White House • Mozilla • Google • The Guardian • Al-Jazeera http://thejit.org/
  13. 13. 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.
  14. 14. Exampleshttp://senchalabs.org/philogl/
  15. 15.   //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 */    }  });
  16. 16. More Examples http://senchalabs.org/philogl/
  17. 17. Thanks!@philogbhttp://philogb.github.com/

×