Your SlideShare is downloading. ×
New Tools for Visualization in JavaScript - Sept. 2011
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

New Tools for Visualization in JavaScript - Sept. 2011

2,779
views

Published on

Published in: Technology, Education

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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