New Tools for Visualization in JavaScript

Nicolas Garcia Belmonte - @philogb - Sept. 2011

I use Web Standards to create Data Visualizations.

I’m the author of two JavaScript data visualization frameworks.

PhiloGL JavaScript InfoVis Toolkit

JavaScript InfoVis Toolkit

• Web Based Interactive Data Visualizations

• Wide Range of Visualizations

• Focused on Performance

• Cross Browser/Device Support

JavaScript InfoVis Toolkit

• JavaScript + 2D Canvas

• IE < 9 Support via ExCanvas or FlashCanvas

• Mobile (iOS, Android) Support

Under The Hood

JavaScript InfoVis Toolkit

Examples

JavaScript InfoVis Toolkit

• The White House

• Mozilla

• Google

• The Guardian

• Al-Jazeera

A Hands-On Toolkit

... all use InfoVis!

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.

• WebGL

• Hardware Acceleration

• 3D Layouts

JavaScript InfoVis ToolkitWhat’s Next ?

JavaScript InfoVis ToolkitWhere do I get it ?

http://thejit.org/

PhiloGL

• WebGL Powered Visualization Framework

• Handles Big Datasets ( > 100K elems )

• Idiomatic JavaScript

• Rich Module System

Model courtesy of Nicolas Kassis - McGill Univ.

Examples

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 */ } });

Idiomatic JavaScript

app.glapp.canvasapp.cameraapp.sceneapp.eventsapp.programapp.texturesapp.framebuffersapp.renderbuffers

• Core

• Math

• WebGL

• Program

• Shaders

• O3D

• Camera

• Scene

• Event

• Fx

• IO

• Workers

Module System

Other Examples

PhiloGLWhere do I get it ?

http://senchalabs.github.com/philogl/

Thanks!

Nicolas Garcia Belmonte

http://philogb.github.com/@philogb