El documento describe dos frameworks de visualización de datos en JavaScript desarrollados por Nicolas Garcia Belmonte: JavaScript InfoVis Toolkit y PhiloGL. JavaScript InfoVis Toolkit es un toolkit amplio para crear visualizaciones de datos basadas en HTML5, con soporte para diferentes navegadores y dispositivos. PhiloGL es un framework de visualización que usa WebGL para manejar grandes conjuntos de datos de forma idiomática en JavaScript de manera modular. Ambos frameworks son de código abierto y están disponibles en línea.

1. Nuevas Herramientas de
Visualización en JavaScript
Nicolas Garcia Belmonte - @philogb

2. Uso estándares web para crear visualizaciones de datos.
@philogb

4. Soy el autor de dos frameworks de visualización en
JavaScript
PhiloGL JavaScript InfoVis Toolkit

5. JavaScript InfoVis Toolkit
• Visualizaciones de datos basadas en HTML5
• Amplio espectro de Visualizaciones
• Enfocado a Performance
• Soporte Cross Browser y Device

6. JavaScript InfoVis Toolkit
Implementación
• JavaScript & 2D Canvas
• Soporta IE < 9 via ExCanvas o FlashCanvas
• Soporte para Mobile (iOS, Android)

7. JavaScript InfoVis Toolkit
Ejemplos

8. JavaScript InfoVis Toolkit
Un Toolkit Práctico
• The White House
• Mozilla
• Google
• The Guardian
• Al-Jazeera
... todos usaron InfoVis!

10. JavaScript InfoVis Toolkit
• En 2010 el Toolkit fue adquirido por
Sencha (ExtJS, Sencha Touch).
• En 2011 el Toolkit participó en
Google Summer of Code.

11. Ideas para el Futuro
• WebGL
• Hardware Acceleration
• Layouts en 3D

12. JavaScript InfoVis Toolkit
¿Dónde se consigue?
http://thejit.org/

13. PhiloGL
• Framework de Visualización que usa WebGL
• Manejo de Grandes Datasets ( > 100K elems )
• Idiomatic JavaScript
• Modular
Model courtesy of Nicolas Kassis - McGill Univ.

14. Ejemplos

15. //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 */
}
});

16. Idiomatic JavaScript
app.gl
app.canvas
app.camera
app.scene
app.events
app.program
app.textures
app.framebuffers
app.renderbuffers

17. Modular
• Core
• Math
• WebGL
• Program
• Shaders
• O3D
• Camera
• Scene
• Event
• Fx
• IO
• Workers

18. Otros Ejemplos

19. PhiloGL
¿Dónde se consigue?
http://senchalabs.org/philogl/

20. Gracias!
@philogb
http://philogb.github.com/