new tools for visualization in javascript - sept. 2011
Post on 11-May-2015
2.853 Views
Preview:
TRANSCRIPT
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
• 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
top related