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

Jun 12
2011

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.

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.