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/