New Tools for Visualization in JavaScript - Sept. 2011

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 Under The Hood• JavaScript + 2D Canvas• IE < 9 Support via ExCanvas or FlashCanvas• Mobile (iOS, Android) Support

JavaScript InfoVis Toolkit Examples

JavaScript InfoVis Toolkit A Hands-On Toolkit • The White House • Mozilla • Google • The Guardian • Al-Jazeera ... 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.

JavaScript InfoVis Toolkit What’s Next ? • WebGL • Hardware Acceleration • 3D Layouts

JavaScript InfoVis Toolkit Where 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.gl app.canvas app.camera app.scene app.events app.program app.textures app.framebuffers app.renderbuffers

Module System • Core • Math • WebGL • Program • Shaders • O3D • Camera • Scene • Event • Fx • IO • Workers

Other Examples

PhiloGL Where do I get it ?http://senchalabs.github.com/philogl/

Thanks! Nicolas Garcia Belmonte@philogb http://philogb.github.com/

http://localhost	4
http://paper.li	3
https://twitter.com	2
http://twitter.com	2
http://us-w1.rockmelt.com	1

New Tools for Visualization in JavaScript - Sept. 2011

by philogb

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 12

Statistics

New Tools for Visualization in JavaScript - Sept. 2011 Presentation Transcript