Embed Size (px)
Citation preview
WebGL. (Web Graphics Library) is a JavaScript API for rendering interactive 3D graphics and 2D graphics within any compatible web browser without the use of plug-ins.
Big data is an all-encompassing term for any collection of data sets so large and complex that it becomes difficult to process them using traditional data processing applications.
Wikipedia
Visualización de datos con WebGL
www.bigdataconf.mx
Actualmente las capacidades de modelado de las computadoras sobrepasan por mucho las capacidades de visualización del ser humano.
El problema no es saber mostrar muchos datos, sino hacer que sea fácilmente comprensible toda esa información.
Visualización de datos con WebGL
www.bigdataconf.mx
www.bigdataconf.mx
Visualización de datos con WebGL
http://en.wikipedia.org/wiki/Big_data#mediaviewer/File:Viegas-UserActivityonWikipedia.gif
www.bigdataconf.mx
Visualización de datos con WebGL
http://web.cs.ucdavis.edu/~ma/img/ebay_clickstream.jpg
www.bigdataconf.mx
Visualización de datos con WebGL
http://www.theguardian.com/world/interactive/2013/apr/30/violence-guns-best-selling-video-games
¿Cantidad o calidad?
Es impresionante el mostrar una cantidad enorme de datos, pero ¿cuánta información
puede obtener el usuario al verlos?
Entre tantos datos las relaciones se vuelven
complejas...
www.bigdataconf.mx
Número de variables representadas
WebGL además de permitir utilizar la profundidad está
diseñado para añadir animación, es decir,
tiempo.
Generalmente se buscan formas
creativas de mostrar en dos dimensiones
cada vez más variables y sus
relaciones.
www.bigdataconf.mx
Ejemplo de PhiloGL: World Flightswww.bigdataconf.mx
Ejemplo de Three.js: Buffer Geometrywww.bigdataconf.mx
Propiedades a utilizar
Cada una de las propiedades puede vincularse con una
variable a representar.
Ejes X, Z y Y Color
Tiempo Perspectiva
www.bigdataconf.mx
Ejes X, Y y Z
Stemkoski Three.js Examples: Helpers
Ejes ortogonales. Pantalla 2D.
Problemas con la profundidad.
www.bigdataconf.mx
Color
Ejemplo de Three.js: Color Blender
Incluye la transparencia.
WebGL utiliza shaders que permiten un
control muy preciso.
www.bigdataconf.mx
Tiempo
No tiene que asociarse con una
variable temporal del modelo.
Permite almacenar y mostrar estados
complejos. Puede asociarse con
objetos.
www.bigdataconf.mx
Perspectiva
Stemkoski Three.js Examples: Viewports - Dual
Posición de la cámara. Permite favorecer
alguna otra de las propiedades.
www.bigdataconf.mx
Interacción: Scripts
Ejemplo de PhiloGL: World temperature changes
Objetos WebGL. Objetos HTML. Eventos HTML. APIs externos.
www.bigdataconf.mx
Aspectos técnicos
Debido a la infinidad de configuraciones del
cliente la obtención y el manejo de datos se complica, aún si la
mayoría del procesamiento es
externo.
Diferencias de hardware.
Velocidad de conexión.
www.bigdataconf.mx
Hardware
Ejemplo de XTK: The SPL/NAC Brain Atlas
WebGL utiliza mucho el GPU.
Corre en un navegador, no es
bueno suponer nada. Siempre hay que
tener un Plan B.
www.bigdataconf.mx
Cargado asíncrono de datos
Mostrar un loader.
No interrumpe la experiencia del
usuario.
No sólo a través de AJAX.
Websockets es una opción atractiva.
www.bigdataconf.mx
Cargado progresivo de datos
Implica cierto control del servidor en el que
se encuentran los datos.
Permite que el usuario vea resultados desde
el inicio.
No es cargado secuencial.
Se puede utilizar web workers.
www.bigdataconf.mx
Objetos WebGL
Todo son triángulos.
Existen muchos frameworks.
Los objetos consumen más recursos y su
acceso es más lento.
Typed Arrays
www.bigdataconf.mx
Typed Arrays
Acceso a datos binarios en bruto.
Bloques secuenciales con tamaño fijo y optimizados para
WebGL..
www.bigdataconf.mx
Asociando arreglos y objetos
Los objetos permiten una programación semántica, OOP.
Es posible asociar arreglos u objetos
simples con objetos complejos.
Es posible asociar el índice con objetos que representan los datos.
La función de mapeo se tiene que diseñar en base a los datos.
www.bigdataconf.mx
Frameworks
Three.js es el más usado pero no está
orientado a visualización de datos.
PhiloGL de Sencha Labs sí está diseñado para la visualización
de datos.
X Toolkit (XTK), WebGL para visualización
científica.
www.bigdataconf.mx
