Nuevas herramientas de visualizacion en JavaScript
20
Nuevas Herramientas de Visualización en JavaScript Nicolas Garcia Belmonte - @philogb
description
Talks organizadas para Dynamic Languages Chile.
Transcript of Nuevas herramientas de visualizacion en JavaScript
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 JavaScript InfoVis Toolkit
JavaScript InfoVis Toolkit
• Visualizaciones de datos basadas en HTML5
• Amplio espectro de Visualizaciones
• Enfocado a Performance
• Soporte Cross Browser y Device
JavaScript InfoVis Toolkit
• JavaScript & 2D Canvas
• Soporta IE < 9 via ExCanvas o FlashCanvas
• Soporte para Mobile (iOS, Android)
Implementación
JavaScript InfoVis Toolkit
Ejemplos
JavaScript InfoVis Toolkit
• The White House
• Mozilla
• The Guardian
• Al-Jazeera
Un Toolkit Práctico
... todos usaron InfoVis!
JavaScript InfoVis Toolkit
• En 2010 el Toolkit fue adquirido por Sencha (ExtJS, Sencha Touch).
• En 2011 el Toolkit participó en Google Summer of Code.
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
• Modular
Model courtesy of Nicolas Kassis - McGill Univ.
Ejemplos
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 */ } });
Idiomatic JavaScript
app.glapp.canvasapp.cameraapp.sceneapp.eventsapp.programapp.texturesapp.framebuffersapp.renderbuffers
• Core
• Math
• WebGL
• Program
• Shaders
• O3D
• Camera
• Scene
• Event
• Fx
• IO
• Workers
Modular
Otros Ejemplos
PhiloGL
http://senchalabs.org/philogl/
¿Dónde se consigue?
