New Tools for Visualization in JavaScript - Sept. 2011

3,745 views

Published on

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

No Downloads
Views
Total views
3,745
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

New Tools for Visualization in JavaScript - Sept. 2011

  1. 1. New Tools for Visualization in JavaScript Nicolas Garcia Belmonte - @philogb - Sept. 2011
  2. 2. I use Web Standards to create Data Visualizations.
  3. 3. I’m the author of two JavaScript data visualization frameworks. PhiloGL JavaScript InfoVis Toolkit
  4. 4. JavaScript InfoVis Toolkit• Web Based Interactive Data Visualizations• Wide Range of Visualizations• Focused on Performance• Cross Browser/Device Support
  5. 5. JavaScript InfoVis Toolkit Under The Hood• JavaScript + 2D Canvas• IE < 9 Support via ExCanvas or FlashCanvas• Mobile (iOS, Android) Support
  6. 6. JavaScript InfoVis Toolkit Examples
  7. 7. JavaScript InfoVis Toolkit A Hands-On Toolkit • The White House • Mozilla • Google • The Guardian • Al-Jazeera ... all use InfoVis!
  8. 8. JavaScript InfoVis Toolkit• In 2010 the Toolkit was acquired by the Sencha Labs Foundation.• In 2011 the Toolkit was part of Google Summer of Code.
  9. 9. JavaScript InfoVis Toolkit What’s Next ? • WebGL • Hardware Acceleration • 3D Layouts
  10. 10. JavaScript InfoVis Toolkit Where do I get it ? http://thejit.org/
  11. 11. PhiloGL• WebGL Powered Visualization Framework• Handles Big Datasets ( > 100K elems )• Idiomatic JavaScript• Rich Module System Model courtesy of Nicolas Kassis - McGill Univ.
  12. 12. Examples
  13. 13. Idiomatic JavaScript //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 */ } });
  14. 14. Idiomatic JavaScript app.gl app.canvas app.camera app.scene app.events app.program app.textures app.framebuffers app.renderbuffers
  15. 15. Module System • Core • Math • WebGL • Program • Shaders • O3D • Camera • Scene • Event • Fx • IO • Workers
  16. 16. Other Examples
  17. 17. PhiloGL Where do I get it ?http://senchalabs.github.com/philogl/
  18. 18. Thanks! Nicolas Garcia Belmonte@philogb http://philogb.github.com/

×