Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

New Tools for Visualization in JavaScript - Sept. 2011

4,002 views

Published on

Published in: Technology, Education
  • Be the first to comment

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/

×