New Tools for Visualization in JavaScript - Sept. 2011
1 like2,302 views
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.
![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 */
}
});](https://image.slidesharecdn.com/talk-sept2011-newtoolsforvisualizationinjavascript-110922120829-phpapp01/85/New-Tools-for-Visualization-in-JavaScript-Sept-2011-13-320.jpg)
New Tools for Visualization in JavaScript - Sept. 2011
- 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/