Nuevas herramientas de visualizacion en JavaScript
description
Transcript of Nuevas herramientas de visualizacion en JavaScript
![Page 1: Nuevas herramientas de visualizacion en JavaScript](https://reader034.fdocuments.co/reader034/viewer/2022051400/54bc2f574a79592a738b459a/html5/thumbnails/1.jpg)
Nuevas Herramientas de Visualización en JavaScript
Nicolas Garcia Belmonte - @philogb
![Page 2: Nuevas herramientas de visualizacion en JavaScript](https://reader034.fdocuments.co/reader034/viewer/2022051400/54bc2f574a79592a738b459a/html5/thumbnails/2.jpg)
Uso estándares web para crear visualizaciones de datos.
@philogb
![Page 3: Nuevas herramientas de visualizacion en JavaScript](https://reader034.fdocuments.co/reader034/viewer/2022051400/54bc2f574a79592a738b459a/html5/thumbnails/3.jpg)
![Page 4: Nuevas herramientas de visualizacion en JavaScript](https://reader034.fdocuments.co/reader034/viewer/2022051400/54bc2f574a79592a738b459a/html5/thumbnails/4.jpg)
Soy el autor de dos frameworks de visualización en JavaScript
PhiloGL JavaScript InfoVis Toolkit
![Page 5: Nuevas herramientas de visualizacion en JavaScript](https://reader034.fdocuments.co/reader034/viewer/2022051400/54bc2f574a79592a738b459a/html5/thumbnails/5.jpg)
JavaScript InfoVis Toolkit
• Visualizaciones de datos basadas en HTML5
• Amplio espectro de Visualizaciones
• Enfocado a Performance
• Soporte Cross Browser y Device
![Page 6: Nuevas herramientas de visualizacion en JavaScript](https://reader034.fdocuments.co/reader034/viewer/2022051400/54bc2f574a79592a738b459a/html5/thumbnails/6.jpg)
JavaScript InfoVis Toolkit
• JavaScript & 2D Canvas
• Soporta IE < 9 via ExCanvas o FlashCanvas
• Soporte para Mobile (iOS, Android)
Implementación
![Page 7: Nuevas herramientas de visualizacion en JavaScript](https://reader034.fdocuments.co/reader034/viewer/2022051400/54bc2f574a79592a738b459a/html5/thumbnails/7.jpg)
JavaScript InfoVis Toolkit
Ejemplos
![Page 8: Nuevas herramientas de visualizacion en JavaScript](https://reader034.fdocuments.co/reader034/viewer/2022051400/54bc2f574a79592a738b459a/html5/thumbnails/8.jpg)
JavaScript InfoVis Toolkit
• The White House
• Mozilla
• The Guardian
• Al-Jazeera
Un Toolkit Práctico
... todos usaron InfoVis!
![Page 9: Nuevas herramientas de visualizacion en JavaScript](https://reader034.fdocuments.co/reader034/viewer/2022051400/54bc2f574a79592a738b459a/html5/thumbnails/9.jpg)
![Page 10: Nuevas herramientas de visualizacion en JavaScript](https://reader034.fdocuments.co/reader034/viewer/2022051400/54bc2f574a79592a738b459a/html5/thumbnails/10.jpg)
JavaScript InfoVis Toolkit
• En 2010 el Toolkit fue adquirido por Sencha (ExtJS, Sencha Touch).
• En 2011 el Toolkit participó en Google Summer of Code.
![Page 11: Nuevas herramientas de visualizacion en JavaScript](https://reader034.fdocuments.co/reader034/viewer/2022051400/54bc2f574a79592a738b459a/html5/thumbnails/11.jpg)
Ideas para el Futuro
• WebGL
• Hardware Acceleration
• Layouts en 3D
![Page 12: Nuevas herramientas de visualizacion en JavaScript](https://reader034.fdocuments.co/reader034/viewer/2022051400/54bc2f574a79592a738b459a/html5/thumbnails/12.jpg)
JavaScript InfoVis Toolkit¿Dónde se consigue?
http://thejit.org/
![Page 13: Nuevas herramientas de visualizacion en JavaScript](https://reader034.fdocuments.co/reader034/viewer/2022051400/54bc2f574a79592a738b459a/html5/thumbnails/13.jpg)
PhiloGL
• Framework de Visualización que usa WebGL
• Manejo de Grandes Datasets ( > 100K elems )
• Idiomatic JavaScript
• Modular
Model courtesy of Nicolas Kassis - McGill Univ.
![Page 14: Nuevas herramientas de visualizacion en JavaScript](https://reader034.fdocuments.co/reader034/viewer/2022051400/54bc2f574a79592a738b459a/html5/thumbnails/14.jpg)
Ejemplos
![Page 15: Nuevas herramientas de visualizacion en JavaScript](https://reader034.fdocuments.co/reader034/viewer/2022051400/54bc2f574a79592a738b459a/html5/thumbnails/15.jpg)
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 */ } });
![Page 16: Nuevas herramientas de visualizacion en JavaScript](https://reader034.fdocuments.co/reader034/viewer/2022051400/54bc2f574a79592a738b459a/html5/thumbnails/16.jpg)
Idiomatic JavaScript
app.glapp.canvasapp.cameraapp.sceneapp.eventsapp.programapp.texturesapp.framebuffersapp.renderbuffers
![Page 17: Nuevas herramientas de visualizacion en JavaScript](https://reader034.fdocuments.co/reader034/viewer/2022051400/54bc2f574a79592a738b459a/html5/thumbnails/17.jpg)
• Core
• Math
• WebGL
• Program
• Shaders
• O3D
• Camera
• Scene
• Event
• Fx
• IO
• Workers
Modular
![Page 18: Nuevas herramientas de visualizacion en JavaScript](https://reader034.fdocuments.co/reader034/viewer/2022051400/54bc2f574a79592a738b459a/html5/thumbnails/18.jpg)
Otros Ejemplos
![Page 19: Nuevas herramientas de visualizacion en JavaScript](https://reader034.fdocuments.co/reader034/viewer/2022051400/54bc2f574a79592a738b459a/html5/thumbnails/19.jpg)
PhiloGL
http://senchalabs.org/philogl/
¿Dónde se consigue?