Transcript Visualización de datos con WebGL.

Migsar Navarro
Tu foto
@MigsarNavarro
[email protected]
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
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.
www.bigdataconf.mx
http://en.wikipedia.org/wiki/Big_data#mediaviewer/File:Viegas-UserActivityonWikipedia.gif
www.bigdataconf.mx
http://web.cs.ucdavis.edu/~ma/img/ebay_clickstream.jpg
www.bigdataconf.mx
http://www.theguardian.com/world/interactive/2013/apr/30/violence-guns-best-selling-video-games
www.bigdataconf.mx
Es impresionante el
mostrar una cantidad
enorme de datos, pero
¿cuánta información
puede obtener el usuario
al verlos?
www.bigdataconf.mx
Entre tantos datos las
relaciones se vuelven
complejas...
WebGL además de
permitir utilizar la
profundidad está
diseñado para añadir
animación, es decir,
tiempo.
www.bigdataconf.mx
Generalmente se buscan
formas creativas de
mostrar en dos
dimensiones cada vez
más variables y sus
relaciones.
Ejemplo de PhiloGL: World Flights
www.bigdataconf.mx
Ejemplo de Three.js: Buffer Geometry
www.bigdataconf.mx
Cada una de las
propiedades puede
vincularse con una
variable a representar.
www.bigdataconf.mx
Ejes X, Z y Y
 Color
 Tiempo
 Perspectiva



Ejes ortogonales.
 Pantalla 2D.
Problemas con la
profundidad.
Stemkoski Three.js
Examples: Helpers
www.bigdataconf.mx
Incluye la
transparencia.
WebGL utiliza shaders
que permiten un
control muy preciso.


Ejemplo de Three.js:
Color Blender
www.bigdataconf.mx

No tiene que asociarse
con una variable
temporal del modelo.
www.bigdataconf.mx


Permite almacenar y
mostrar estados
complejos.
Puede asociarse con
objetos.

Posición de la cámara.
 Permite favorecer
alguna otra de las
propiedades.
Stemkoski Three.js Examples:
Viewports - Dual
www.bigdataconf.mx
Objetos WebGL.
 Objetos HTML.
 Eventos HTML.
 APIs externos.

Ejemplo de PhiloGL: World
temperature changes
www.bigdataconf.mx
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.
www.bigdataconf.mx


Diferencias de
hardware.
Velocidad de conexión.
WebGL utiliza mucho el
GPU.
 Corre en un
navegador, no es
bueno suponer nada.
 Siempre hay que tener
un Plan B.

Ejemplo de XTK: The
SPL/NAC Brain Atlas
www.bigdataconf.mx
Mostrar un loader.


No interrumpe la
experiencia del
usuario.
www.bigdataconf.mx


No sólo a través de
AJAX.
Websockets es una
opción atractiva.

Implica cierto control
del servidor en el que
se encuentran los
datos.



Permite que el usuario
vea resultados desde el
inicio.
www.bigdataconf.mx
No es cargado
secuencial.
Se puede utilizar web
workers.

Todo son triángulos.

Existen muchos
frameworks.
www.bigdataconf.mx

Los objetos consumen
más recursos y su
acceso es más lento.

Typed Arrays
Acceso a datos
binarios en bruto.


Bloques secuenciales
con tamaño fijo y
optimizados para
WebGL..
www.bigdataconf.mx

Los objetos permiten
una programación
semántica, OOP.
Es posible asociar
arreglos u objetos
simples con objetos
complejos.

www.bigdataconf.mx
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.

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.
www.bigdataconf.mx

X Toolkit (XTK), WebGL
para visualización
científica.
Migsar Navarro
@MigsarNavarro
[email protected]