Nuevas Herramientas deVisualización en JavaScript   Nicolas Garcia Belmonte - @philogb
Uso estándares web para crear visualizaciones de datos.                     @philogb
Soy el autor de dos frameworks de visualización en                     JavaScript     PhiloGL                 JavaScript I...
JavaScript InfoVis Toolkit• Visualizaciones de datos basadas en HTML5• Amplio espectro de Visualizaciones• Enfocado a Perf...
JavaScript InfoVis Toolkit              Implementación• JavaScript & 2D Canvas• Soporta IE < 9 via ExCanvas o FlashCanvas•...
JavaScript InfoVis Toolkit         Ejemplos
JavaScript InfoVis Toolkit      Un Toolkit Práctico     • The White House     • Mozilla     • Google     • The Guardian   ...
JavaScript InfoVis Toolkit• En 2010 el Toolkit fue adquirido por  Sencha (ExtJS, Sencha Touch).• En 2011 el Toolkit partic...
Ideas para el Futuro • WebGL • Hardware Acceleration • Layouts en 3D
JavaScript InfoVis Toolkit     ¿Dónde se consigue?       http://thejit.org/
PhiloGL•   Framework de Visualización que usa WebGL•   Manejo de Grandes Datasets ( > 100K elems )•   Idiomatic JavaScript...
Ejemplos
  //Create application  PhiloGL(canvasId, {    program: {      from: uris,      vs: shader.vs.glsl,                       ...
Idiomatic JavaScript    app.gl    app.canvas    app.camera    app.scene    app.events    app.program    app.textures    ap...
Modular •   Core •   Math •   WebGL •   Program •   Shaders •   O3D •   Camera •   Scene •   Event •   Fx •   IO •   Workers
Otros Ejemplos
PhiloGL    ¿Dónde se consigue?http://senchalabs.org/philogl/
Gracias!@philogbhttp://philogb.github.com/
Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript
Upcoming SlideShare
Loading in...5
×

Nuevas herramientas de visualizacion en JavaScript

1,692

Published on

Talks organizadas para Dynamic Languages Chile.

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

No Downloads
Views
Total Views
1,692
On Slideshare
0
From Embeds
0
Number of Embeds
0
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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×