A blog about data, information and IT, by Mario Alberich

Jun 16
2011

Visualización con HTML5 - Javascript Infovis Toolkit

Javascript Infovis Toolkit (JIT) es otra de las bibliotecas de gráficos y visualización que he utilizado puntualmente en los últimos meses.  A diferencia de Protovis, se trata de una biblioteca de visualización más enfocada a visualizaciones concretas como se puede ver en las muestras del sitio, aunque con elementos interesantes en su filosofía.

Estructuras de datos más complejas


Aparentemente, el punto de partida de JIT es el inverso al de Protovis.  Si en el caso de Protovis se partía de una estructura de datos principalmente lineal (un listado de elementos a visualizar), sobre los cuales se puede aplicar una estructura de visualización concreta, Infovis parece partir del objetivo de visualizar estructuras complejas, ya sean árboles o grafos.

Infovis también permite la composición.  Es decir, el elemento de una visualización (el nodo de un grafo) puede ser también otro componente (ver el ejemplo del hiperárbol de diagramas de sectores).

La diferencia, eso sí, es también el peso de la biblioteca.  JIT está mucho más pensada para el entorno web y sus archivos de javascript son mucho más ligeros que Protovis.

Velocidad


Infovis sorprende por su velocidad de proceso, especialmente en los casos con estructuras complejas.  Quizá sea por ello que en la mayoría de gráficos de muestra se incluyen por defecto animaciones introductorias, que provocan el sufrimiento de la CPU si no estamos utilizando Google Chrome.

Por lo tanto, es una velocidad con vistas al futuro, considerando que el proceso de optimización a la que están sometidos los navegadores (aparte de la introducción de tecnologías HTML5 especialmente interesante como los web workers) permitirá que en un futuro cercano estas visualizaciones sean potentes en todos los navegadores.

Si utilizas el código de alguna de las visualizaciones de demostración, y prevees su uso en navegadores diferentes de Chrome (pienso en Firefox, y siendo optimistas IE8, aunque mejor es intentarlo antes de decepcionar), procura desactivar las animaciones (o escoger la menos intensiva) para garantizar la experiencia del usuario.

WebGL


Otro de los aspectos a seguir en un futuro próximo es la implementación de WebGL en Infovis.  Este aspecto es sugerente, aunque queda por demostrar en qué casos es realmente necesaria esta tecnología.

En este punto existen dos razones para justificar el uso de WebGL: su capacidad de visualizar en 3D, y por otro lado la capacidad de utilizar la GPU de la tarjeta gráfica para agilizar las visualizaciones concretas.

En el primer caso es una cuestión metodológica y está por ver que el 3D aporte mucho valor a la visualización en general.

En el segundo caso, el uso del webGL puede estar justificado para el caso de visualizaciones que requieren cálculos complejos delegables en la GPU.  Este es el caso de los grafos con representación por equilibrio de fuerzas entre los nodos (Force Directed Layout).  En este punto, el Canvas no es una alternativa frente a una GPU dedicada.

Como muestra de esto último se puede ver el vídeo que muestra Nicolás García Belmonte (creador de JIT) en el blog del proyecto sobre la demostración de Infovis con webGL.

Tags

gestión documental 10     Recuperación información 11     Linux 7     Usabilidad 5     open source 3     Tagging 12     lógica borrosa 2     fuentes de información 12     Google 6     off-topic 6     spam 2     grafos 6     Web social 11     modelización 12     Productividad 11     buscadores 2     utilidades 17     Profesionales 9     SEO 5     estándares 3     veracidad 3     relevancia 2     lingüística 2     PLN 2     lenguajes documentales 2     apis-mashups 3     reseñas 7     Flash 7     Gráficos estadísticos 13     Publicidad 3     Innovación 5     muestreo estadístico 9     PHP 14     internet 2     testeo 12     desarrollo 3     visualizacion 36     javascript 16     datos abiertos 9     elecciones 2     simulación 5     html5 7     phing 9     ssh 2     seguridad 3     indicadores 2     demografía 3     media 2     algoritmos 7     shell 4     mysql 2     backup 2     big data 6     twitter 2     d3js 11     revealjs 2     metodología 6     data-journalism 6     smartcities 2     NYT 2     privacidad 3     benchmarking 4     recopilaciones 21     magento 5     formacion 2     github 2     HHVM 3     psicología 2     angularjs 3     grep 2     nodejs 5     promises 2     mapreduce 3     crossfilter 2     exploración de datos 2     machine learning 2    

© 2007 and beyond Mario Alberich, licensed under CC-BY-SA unless stated otherwise.