Your SlideShare is downloading. ×
0
Data visualization for the web
Data visualization for the web
Data visualization for the web
Data visualization for the web
Data visualization for the web
Data visualization for the web
Data visualization for the web
Data visualization for the web
Data visualization for the web
Data visualization for the web
Data visualization for the web
Data visualization for the web
Data visualization for the web
Data visualization for the web
Data visualization for the web
Data visualization for the web
Data visualization for the web
Data visualization for the web
Data visualization for the web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Data visualization for the web

1,881

Published on

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

No Downloads
Views
Total Views
1,881
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
19
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Data Visualization for the Web @philogb - Stanford ACM Tech Talks
  • 2. I use Web Standards to create Data Visualizations. @philogb
  • 3. The Problem
  • 4. @philogb - Stanford ACM Tech Talks
  • 5. I wish I had someguidance when making data visualizations!
  • 6. InfoVis Theory
  • 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. 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. Steven’s Power Law
  • 10. InfoVis Tools
  • 11. JavaScript InfoVis Toolkit http://thejit.org/
  • 12. JavaScript InfoVis Toolkit A Hands-On Toolkit • The White House • Mozilla • Google • The Guardian • Al-Jazeera http://thejit.org/
  • 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. Exampleshttp://senchalabs.org/philogl/
  • 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. More Examples http://senchalabs.org/philogl/
  • 17. Thanks!@philogbhttp://philogb.github.com/

×