Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Nuevas Herramientas de
Visualizació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                 JavaScr...
JavaScript InfoVis Toolkit


• Visualizaciones de datos basadas en HTML5
• Amplio espectro de Visualizaciones
• Enfocado a...
JavaScript InfoVis Toolkit
              Implementación

• JavaScript & 2D Canvas
• Soporta IE < 9 via ExCanvas o FlashCan...
JavaScript InfoVis Toolkit



         Ejemplos
JavaScript InfoVis Toolkit
      Un Toolkit Práctico

     • The White House
     • Mozilla
     • Google
     • The Guard...
JavaScript InfoVis Toolkit

• En 2010 el Toolkit fue adquirido por
  Sencha (ExtJS, Sencha Touch).


• En 2011 el Toolkit ...
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 JavaS...
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.textur...
Modular
 •   Core
 •   Math
 •   WebGL
 •   Program
 •   Shaders
 •   O3D
 •   Camera
 •   Scene
 •   Event
 •   Fx
 •   I...
Otros Ejemplos
PhiloGL
    ¿Dónde se consigue?




http://senchalabs.org/philogl/
Gracias!

@philogb

http://philogb.github.com/
Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript
Vous avez terminé ce document.
Télécharger et lire hors ligne.
Prochain SlideShare
New Tools for Visualization in JavaScript - Sept. 2011
Suivant

Nuevas herramientas de visualizacion en JavaScript

  1. 1. Nuevas Herramientas de Visualizació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! @philogb http://philogb.github.com/
  • TakeshiWatanabe2

    May. 14, 2012
  • skauch

    May. 13, 2012
  • miguelinux

    May. 13, 2012

Talks organizadas para Dynamic Languages Chile.

Vues

Nombre de vues

2 819

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

6

Actions

Téléchargements

14

Partages

0

Commentaires

0

Mentions J'aime

3

×