Visualización con HTML5 - Protovis

Desde la última vez que comenté herramientas para mostrar gráficos estadísticos en la web (entonces en Flash), han cambiado infinidad de cosas.

HTML5, aunque en vías de implantación (probablemente durante meses o algunos años), representa todo lo que no se hizo durante los últimos 5 años porque se disponía de Flash y ya era suficiente.  Probablemente también porque el mercado de navegadores estaba dominado por Internet Explorer.

Con la nueva versión de HTML aparecen dos elementos clave para representar gráficamente datos en la web: el Canvas y WebGL.  El canvas está pensado para mostrar gráficos en 2D, mientras que webGL está pensado para visualizaciones 3D que aprovechen la unidad gráfica de proceso (o GPU) de nuestra tarjeta gráfica.  En el segundo caso hay un objetivo claro: utilizar juegos con altas exigencias gráficas en el navegador.

Del Flash al HTML5

La primera diferencia que uno siente al trabajar con gráficos basados en HTML5 els la sensación de continuidad: no precisar el cambio de contexto ni de lenguaje de programación para realizar gráficos.

Sin embargo el gran motivo de cambio hacia el HTML5 son los móviles, con los que Flash provoca problemas de rendimiento, si es que lo tienen integrado en los navegadores.

Diferencias claves de Protovis

Existiendo bibliotecas gráficas para HTML5 como raphaeljs, o el port de processing, o Google Charts, entre otras que he visto, me planteo sus factores diferenciales.  Estos factores diferenciales me permiten valorar si el tiempo de aprendizaje me compensa por:

• Su flexibilidad o su especificidad de acuerdo a nuestros objetivos.
• Su velocidad.
• Usabilidad.
• Tipo de licencia
• Facilidad de desarrollo (la usabilidad para el programador).
• Mantenimiento, comunidad y en general, garantías de continuidad.

Los puntos más a favor de esta biblioteca para mis potenciales usos son:

• Se basa (o al menos se inspira) en el framework de la gramática de los gráficos, por lo que tiene una versatilidad prácticamente ilimitada.
• El método de configuración de un gráfico es relativamente sencillo, ya que se basa en el método de encadenamiento.
• Al funcionar por capas conceptuales de la gramática, permite componer gráficos y subgráficos, aparte de facilitar la creación de nuevos elementos en cada nivel de definición del gráfico.
• Aunque está muy enfocada a los gráficos estadísticos, su método de desarrollo permite pensar en su uso para visualizaciones más bien estructuradas y basadas en los datos.
• Incorpora algunas funciones estadísticas como preparación de los datos, aunque no es su objetivo principal.
• Licencia BSD (similar a la MIT), prácticamente la que proporciona más libertad para su uso (tanto si el desarrollo final es también libre o propietario).

También surgieron algunos contras al respecto:

• Es una biblioteca pesada, más bien pensada para Intranets o conexiones rápidas, aunque con un buen uso del caché de navegador y los ETags sólo se notará en la primera carga.
• Su potencial es el uso específico, personalizado.  Si el objetivo son gráficos sencillos, existen otras bibliotecas más adecuadas.

Trabajando con Protovis

En el sitio de protovis se hallan ejemplos bastante representativos de las posibilidades generales de protovis, y opciones de personalización interesantes.  La mayoría de gráficos estándares pueden basarse en tales ejemplos de código

Como colofón, se puede encontrar la muestra del gráfico de Minard realizada con Protovis que Tufte considera el mejor gráfico de la historia.  Este gráfico también aparece en el libro de la gramática de los gráficos, como muestra de los factores componentes de esta visualización.

Por otro lado, también es posible incrustar gráficos de Protovis en Wordpress, utilizando el plugin de carga de Protovis.