Migsar Tu foto.

Presentación del tema: "Migsar Tu foto."— Transcripción de la presentación:

1 Migsar Navarro @MigsarNavarro migsar.navarro@gmail.com Tu foto

2 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. data sets Wikipedia www.bigdataconf.mx

3 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

4 http://en.wikipedia.org/wiki/Big_data#mediaviewer/File:Viegas-UserActivityonWikipedia.gif

5 www.bigdataconf.mx http://web.cs.ucdavis.edu/~ma/img/ebay_clickstream.jpg

6 www.bigdataconf.mx http://www.theguardian.com/world/interactive/2013/apr/30/violence-guns-best-selling-video-games

7 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

8 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

9

10

11 Cada una de las propiedades puede vincularse con una variable a representar.  Ejes X, Z y Y  Color  Tiempo  Perspectiva www.bigdataconf.mx

12 Stemkoski Three.js Examples: Helpers  Ejes ortogonales.  Pantalla 2D.  Problemas con la profundidad. www.bigdataconf.mx

13 Ejemplo de Three.js: Color Blender  Incluye la transparencia.  WebGL utiliza shaders que permiten un control muy preciso. www.bigdataconf.mx

14  No tiene que asociarse con una variable temporal del modelo.  Permite almacenar y mostrar estados complejos.  Puede asociarse con objetos. www.bigdataconf.mx

15 Stemkoski Three.js Examples: Viewports - Dual  Posición de la cámara.  Permite favorecer alguna otra de las propiedades. www.bigdataconf.mx

16 Ejemplo de PhiloGL: World temperature changes  Objetos WebGL.  Objetos HTML.  Eventos HTML.  APIs externos. www.bigdataconf.mx

17 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

18 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

19  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

20  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

21  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

22  Acceso a datos binarios en bruto.  Bloques secuenciales con tamaño fijo y optimizados para WebGL.. www.bigdataconf.mx

23  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

24  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

25 Migsar Navarro @MigsarNavarro migsar.navarro@gmail.com