Also available in English

Inf@Vis!

La revista digital de InfoVis.net

Ocho a√Īos y WET!
por Juan C. D√ľrsteler [mensaje nļ 193]

En el octavo aniversario de InfoVis.net hemos querido pasar de la teoría a la práctica y presentamos WET (Website Exploration Tool), una herramienta experimental que permite visualizar cualquier cosa que tenga estructura, contenidos y utilización de una forma integrada. Como ejemplo lo aplicamos a la Web.

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.

WET1.png (249776 bytes)
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:
      ArbolRadial.png (367848 bytes) TreeMap.png (30824 bytes)
      √Ā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.¬†

 

ErrorEstructura.png (404623 bytes) Atributos.png (404596 bytes)
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).

RadialLink.png (396673 bytes) Estadisticas.png (52458 bytes)
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:

http://www.infovis.net/printMag.php?num=1&lang=1   Num 1 Visualizaci√≥n de Informaci√≥n: algo se agita en la red...
http://www.zaragoza.es   Website del Ayuntamiento de Zaragoza
http://www.infovis.net/printMag.php?num=51&lang=1   Num 51 Treemaps
http://www.infovis.net/printMag.php?num=52&lang=1   Num 52 La Evoluci√≥n de los Treemaps
http://ieeexplore.ieee.org/xpl/freeabs_all.jsp?tp=&arnumber=4271984&isnumber=4271944   Art√≠culo WET: a prototype of an Exploratory Search System for Web Mining to assess Usability
http://ieeexplore.ieee.org/xpl/RecentCon.jsp?punumber=4271943   Information Visualization, 2007. IV '07. 11th International Conference
© Copyright InfoVis.net 2000-2018