Nuevas herramientas de visualizacion en JavaScript

2,206 views

Published on

Talks organizadas para Dynamic Languages Chile.

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,206
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
13
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Nuevas herramientas de visualizacion en JavaScript

  1. 1. Nuevas Herramientas deVisualización en JavaScript Nicolas Garcia Belmonte - @philogb
  2. 2. Uso estándares web para crear visualizaciones de datos. @philogb
  3. 3. Soy el autor de dos frameworks de visualización en JavaScript PhiloGL JavaScript InfoVis Toolkit
  4. 4. JavaScript InfoVis Toolkit• Visualizaciones de datos basadas en HTML5• Amplio espectro de Visualizaciones• Enfocado a Performance• Soporte Cross Browser y Device
  5. 5. JavaScript InfoVis Toolkit Implementación• JavaScript & 2D Canvas• Soporta IE < 9 via ExCanvas o FlashCanvas• Soporte para Mobile (iOS, Android)
  6. 6. JavaScript InfoVis Toolkit Ejemplos
  7. 7. JavaScript InfoVis Toolkit Un Toolkit Práctico • The White House • Mozilla • Google • The Guardian • Al-Jazeera ... todos usaron InfoVis!
  8. 8. JavaScript InfoVis Toolkit• En 2010 el Toolkit fue adquirido por Sencha (ExtJS, Sencha Touch).• En 2011 el Toolkit participó en Google Summer of Code.
  9. 9. Ideas para el Futuro • WebGL • Hardware Acceleration • Layouts en 3D
  10. 10. JavaScript InfoVis Toolkit ¿Dónde se consigue? http://thejit.org/
  11. 11. PhiloGL• Framework de Visualización que usa WebGL• Manejo de Grandes Datasets ( > 100K elems )• Idiomatic JavaScript• Modular Model courtesy of Nicolas Kassis - McGill Univ.
  12. 12. Ejemplos
  13. 13.   //Create application  PhiloGL(canvasId, {    program: {      from: uris,      vs: shader.vs.glsl, Idiomatic JavaScript      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. 14. Idiomatic JavaScript app.gl app.canvas app.camera app.scene app.events app.program app.textures app.framebuffers app.renderbuffers
  15. 15. Modular • Core • Math • WebGL • Program • Shaders • O3D • Camera • Scene • Event • Fx • IO • Workers
  16. 16. Otros Ejemplos
  17. 17. PhiloGL ¿Dónde se consigue?http://senchalabs.org/philogl/
  18. 18. Gracias!@philogbhttp://philogb.github.com/

×