Hace ocho años, el 1 de Julio de 2000 Infovis.net comenzó su peculiar singladura por las aguas de la Visualización de Información. Visto en perspectiva el número 1 era corto y considerablemente naïf. Peor aún no tenía ni gráficos ni visualizaciones. Pero nació con la voluntad de poner en práctica aquello que aprendíamos por el camino.

Una vista de la herramienta WET Se pueden apreciar la visualización simultánea del árbol radial (arriba) Treemap (abajo) y paneles de control e información (a la derecha). El código de colores muestra en este caso la agrupación por grupos de palabras clave similares usados para llegar a la página. Fuente: Captura de pantalla por el autor Pulsa sobre la imagen para agrandarla

Desde el principio quisimos incluir visualizaciones pero la propia naturaleza de InfoVis, al ser prácticamente el show de un solo equilibrista con poco tiempo libre disponible para ello, ha hecho muy difícil que en estas páginas hubiera visualizaciones creadas por el propio equipo de InfoVis.

Esto ya no es así. En 2006 pudimos iniciar un pequeño grupo de investigación sobre Visualización de Información en la Universitat Pompeu Fabra dentro del grupo de Recuperación de Información y Minería Web. Gracias a la financiación* de la empresa SPOC (ahora integrada en ALTRAN) y al soporte económico del Ayuntamiento de Zaragoza hemos podido desarrollar una herramienta de visualización con la que estamos realizando una tesis doctoral y que denominamos WET (Website Exploration Tool).

La idea que subyace a WET es la de representar visualmente cualquier sistema que posea: 

• Una estructura representable como un árbol. Es decir cualquier estructura jerárquica.
  
  
• Que disponga de un contenido, sea textual, multimedia, o de cualquier otro tipo
  
  
• Del que se pueda obtener información sobre la utilización que se hace del mismo.

Dada la ubicuidad de Internet y la facilidad de encontrar ejemplos prácticos (en particular la propia web de InfoVis.net) la primera aplicación de la misma es la visualización de la estructura contenido y utilización de websites. Éstos obviamente cumplen las características antes mencionadas y son de fácil acceso, pero la arquitectura está pensada para cualquier sistema jerárquico digital. Además, como todo en InfoVis.net es al menos bilingüe, WET está internacionalizado y hay versiones en Catalán, Castellano e Inglés.

La esencia de WET consiste en 

• la visualización de la estructura jerárquica en un marco que permite ver simultáneamente el foco de nuestro interés sin perder de vista el contexto, mediante el uso de varias metáforas visuales. Actualmente están implementadas dos metáforas visuales, pero la idea es tener una visión desde múltiples perspectivas enlazadas de forma que la interacción sobre una de las perspectivas se refleja simultáneamente en todas las demás (linked brushing). Dichas metáforas visuales son:
  

  Árbol Radial. En el radial tree cada página se asimila a un círculo de color cuyo tamaño (programable) es en este caso proporcional  al número de páginas servidas totales Fuente: Captura de pantalla por el autor Pulsa sobre la imagen para agrandarla	TreeMap. En el treemap cada página es un rectángulo con area y color análogos a la codificación del árbol radial Fuente: Captura de pantalla por el autor Pulsa sobre la imagen para agrandarla

  • Radial Tree (Árbol Radial). A diferencia del árbol clásico en el que desde un nodo raíz, situado en la parte alta de la visualización, aparecen las ramas hijas, enlazadas por arcos y situados por debajo del nodo raíz, en un árbol radial el nodo raiz ocupa el centro de una serie de círculos concéntricos sobre los que se sitúan las ramas. Cada circulo supone un nivel más. 
    
    En el caso de una web saltar de un circulo interior al siguiente exterior supone una pulsación (click) del ratón. Cada nodo del árbol se representa mediante un pequeño círculo relleno. 
    
    
  • TreeMap. Esta metáfora (véase los artículos 51 y 52) otorga un rectángulo a cada nodo del árbol de forma que el nodo raíz ocupa todo el espacio disponible y sus ramas se anidan en forma de rectángulos inscritos dentro del mismo y así sucesivamente hasta llegar a las hojas. Típicamente el área del cuadrado es proporcional a la magnitud que se quiera representar.     
    
    
• Sobre la representación de la estructura es posible superponer información referente al contenido y/o a su utilización, representando una serie de métricas, como pueden ser el ranking de Google de cada página, o el numero de descargas, numero de enlaces que entran o salen etc., mediante su asociación con ciertas variables visuales. Entre las actualmente disponibles se cuentan: 
  
  
  • el tamaño que modifica el radio de cada nodo haciéndolo proporcional a alguna de las métricas o variables que queramos representar, 
    
    
  • el color de relleno que puede ser proporcional o estar en relación con otra metrica. 
    
    
  • el color del borde y/o 
    
    
  • la forma del nodo que puede ser diferente de la circular y adoptar el hexágono, cuadrado, triangulo, etc.. 
    

Ello permite cruzar en cada nodo información multidimensional y encontrar nodos que cumplen conjuntos de requisitos más o menos complejos.

En WET cada metáfora visual corre en su propia ventana que permite hacer zoom, mover etc. Dado que sobre el treemap ya hablamos en su día me centraré en el árbol radial y en la representación de la estructura contenido y uso sobre el mismo.

La visualización de la estructura es por si sola de gran interés. Cualquier jerarquía suficientemente grande se hace inabarcable rápidamente para quien la ha creado. La web es un ejemplo claro. Mediante la visualización de la estructura es posible localizar errores rápidamente. 

Si nos fijamos en el árbol radial de la web de Infovis durante el mes de Febrero de 2007 (en las imágenes adjuntas), podemos constatar que hay una serie de páginas que cuelgan de los arcos más externos que, conforme al diseño original, no debieran estar ahí pero debido a errores humanos o del script utilizado para su conversión en 2005 de paginas html estáticas a dinámicas han quedado descolgados. En la imagen se han circulado en rojo. Apercibirse de este tipo de problemas con una larga lista de nombres de pagina es muy complejo. 

Errores en la estructura de InfoVis.net. Los arcos rojos señalan nodos incorrectamente situados Fuente: Captura de pantalla por el autor Pulsa sobre la imagen para agrandarla	Variables visuales asociadas a métricas: en este caso, Forma con Page rank,  Color con Grupo de Palabras Clave usadas para acceder a la página, Color de Borde si esta Indexado en Yahoo!,  Tamaño con numero de páginas servidas Fuente: Captura de pantalla por el autor Pulsa sobre la imagen para agrandarla

Por otro lado la superposición sobre la estructura de la representación de las métricas nos permiten obtener información multidimensional cruzando distintos tipos de información, como ya hemos apuntado antes, que nos pueden permitir encontrar casos particulares o bien patrones generales, según sean nuestras necesidades. 

Por ejemplo, podemos asignar el número de páginas servidas en un determinado periodo al tamaño del nodo y el color al clúster que agrupa las palabras clave por las que se ha llegado mayoritariamente a esa página (véase las ilustraciones) y ver si las páginas más visitadas son de la misma temática (mismo color) o diferente. O bien  encontrar a golpe de vista las páginas más visitadas que tienen un ranking de Google determinado (no necesariamente las páginas con ranking más alto son las más visitadas en un periodo determinado).

Grosor de enlaces proporcional a su uso. Fuente: Captura de pantalla por el autor Pulsa sobre la imagen para agrandarla	Estadísticas de uso al clickar una página Fuente: Captura de pantalla por el autor Pulsa sobre la imagen para agrandarla

Cada uno de los enlaces entre páginas tiene un grosor determinado que es proporcional al número de veces que se ha utilizado en un periodo determinado. Pasando el ratón por encima del enlace aparece la frecuencia con que se ha usado. Si nos colocamos sobre una página y pulsamos sobre la misma podemos conocer las estadísticas de utilización de todas las métricas y la página se ilumina tanto en el árbol radial como en el treemap. Pulsando sobre el boton derecho del ratón no surge un recuadro con un pequeño menú que permite visitar directamente la página o ver los enlaces entrantes y salientes etc.

WET tiene unas cuantas posibilidades más pero no es nuestro interés ser exhaustivos con sus funcionalidades en este limitado espacio. 

Por el contrario creemos que sería muy interesante abrir WET a la experimentación de todos aquellos lectores de InfoVis que deseen probarlo y darnos su retroalimentación. Esto podría constituir la primera experiencia colaborativa en InfoVis.net sobre una visualización de información. Para ello en breve editaremos un nuevo artículo con información complementaria sobre WET y con las instrucciones sobre cómo acceder y usarlo. Nos encantaría contar con su soporte de esta iniciativa!

* Soportada por la financiación del CIDEM del gobierno autonómico de Catalunya.
Vease tambien WET: a prototype of an Exploratory Search System for Web Mining to assess Usability by Pascual, V.   Dursteler, J.C.  in: Information Visualization, 2007. IV '07. 11th International Conference Zürich, 4-6 July 2007, page: 211-215

Enlaces de este artículo: