Your SlideShare is downloading. ×
0
Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Nuevas herramientas de visualizacion en JavaScript

1,619

Published on

Talks organizadas para Dynamic Languages Chile.

Talks organizadas para Dynamic Languages Chile.

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

No Downloads
Views
Total Views
1,619
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Nuevas Herramientas deVisualización en JavaScript Nicolas Garcia Belmonte - @philogb
  • 2. Uso estándares web para crear visualizaciones de datos. @philogb
  • 3. Soy el autor de dos frameworks de visualización en JavaScript PhiloGL JavaScript InfoVis Toolkit
  • 4. JavaScript InfoVis Toolkit• Visualizaciones de datos basadas en HTML5• Amplio espectro de Visualizaciones• Enfocado a Performance• Soporte Cross Browser y Device
  • 5. JavaScript InfoVis Toolkit Implementación• JavaScript & 2D Canvas• Soporta IE < 9 via ExCanvas o FlashCanvas• Soporte para Mobile (iOS, Android)
  • 6. JavaScript InfoVis Toolkit Ejemplos
  • 7. JavaScript InfoVis Toolkit Un Toolkit Práctico • The White House • Mozilla • Google • The Guardian • Al-Jazeera ... todos usaron InfoVis!
  • 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. Ideas para el Futuro • WebGL • Hardware Acceleration • Layouts en 3D
  • 10. JavaScript InfoVis Toolkit ¿Dónde se consigue? http://thejit.org/
  • 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. Ejemplos
  • 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. Idiomatic JavaScript app.gl app.canvas app.camera app.scene app.events app.program app.textures app.framebuffers app.renderbuffers
  • 15. Modular • Core • Math • WebGL • Program • Shaders • O3D • Camera • Scene • Event • Fx • IO • Workers
  • 16. Otros Ejemplos
  • 17. PhiloGL ¿Dónde se consigue?http://senchalabs.org/philogl/
  • 18. Gracias!@philogbhttp://philogb.github.com/

×