This document summarizes two JavaScript data visualization frameworks: the JavaScript InfoVis Toolkit and PhiloGL. It describes that the JavaScript InfoVis Toolkit provides a wide range of visualizations and is focused on performance with support for browsers, devices, and mobile platforms. It also notes that the toolkit is used by organizations like the White House, Mozilla, and Google. The document then introduces PhiloGL as a WebGL powered framework for large datasets with an idiomatic JavaScript API and module system. It provides examples of both frameworks.

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/