También disponible en Español

Inf@Vis!

The digital magazine of InfoVis.net

Eight Years and WET!
by Juan C. Dürsteler [message nº 193]

In the eighth anniversary of InfoVis.net we wanted to go from theory to practice by introducing WET (Website Exploration Tool), an experimental tool that can visualise anything holding a structure, contents and usage in an integrated way. As an example we apply it to the Web.

Eight years ago the 1st of July 2000 Infovis.net began its peculiar endeavour through the seas of Information visualisation. Seen in perspective, number 1 was very short and considerably naive. But it was born with the will to put into practice what we were learning on our way.

WET1_en.png (239953 bytes)
A view of WET
You can appreciate the simultaneous visualisation of the Radial Tree (above), Treemap (below) and control and information panels (to the right). The colour coding shows the clustering by keyword used to primarily access a particular page. 
Source
: Screenshot by the author
Click on the image to enlarge it

From the beginning we wanted to include visualisations but the very nature of Inf@vis, being practically the show of one funambulist in his spare time, made having visualisations created by the team of Infovis.net very difficult to achieve.

This is no longer true. In 2006 we could initiate a small research group about Information Visualisation in the Universitat Pompeu Fabra in Barcelona within the group of Information retrieval and Data Mining in the Web. Thanks to the funding* of Institutions like the company SPOC(now in the ALTRAN group) and the economic support of the council of the city of Zaragoza (Ayuntamiento de Zaragoza) we have been able to develop a visualisation tool we call WET (Website Exploration Tool) that is the object of a PhD.

The idea underlying WET is that of visually representing any system having: 

  • A structure that could be represented as a tree, i.e. any hierarchical structure.

  • that holds contents, be it textual, multimedia, or any other type

  • where you can extract information about the usage people make of it.

Given Internet's ubiquity and the ease to find practical examples of this in it (in particular InfoVis.net website itself) the first application of WET has been the visualisation of the structure contents and usage of websites. These obviously fulfill the above mentioned requirements and are easy to access, but the architecture of WET has been thought out for any digital hierarchical system.  Moreover, since everything in Infovis.net is bilingual, WET is internationalised and you have Catalan, Spanish and English versions.

The essence of WET consists of 

  • the visualisation of the hierarchical structure in a framework that allows the user to see simultaneously the focus of our interest without losing its context, by using several visual metaphors. Currently there are two visual metaphors implemented, but the idea is to have multiple perspective views where each metaphor is linked to the others so that the interaction with one is reflected on the others (linked brushing). Said visual metaphors are:
      ArbolRadial_en.png (367975 bytes) TreeMap_en.png (25715 bytes)
      Radial Tree. Here each page is depicted as a coloured circle. Its (programmable) size is in this case proportional to the total number of requested pages in a particular period.
      Source
      : Screenshot by the author
      Click on the image to enlarge it
      TreeMap. In it each page is a rectangle with area and colour coded in the same way as in the radial tree 
      Source
      : Screenshot by the author
      Click on the image to enlarge it
    • Radial Tree. Unlike the classical tree where the root node stands on top and branches and leaves hanging down from it, linked by arcs, in a radial tree the root is in the center and each child is placed in a concentric circle, depending on how many relatives are between it and the root. Each circle means another level. 

      In the case of a website each circle means that you need to perform one mouse click to reach it from the inner one. Each node of the tree is depicted by a small filled circle.  

    • TreeMap. This metaphor (see articles 51 y 52) assigns a rectangle to each node of the tree in such a way that the root occupies all the available space and its branches are nested in the form of rectangles inscribed within their parent rectangles and so on until reaching the leaves. Typically the area of the rectangle is proportional to the magnitude we want to represent.     

  • On the representation of the structure it's possible to overlay information regarding the contents and / or the usage, by depicting a series of metrics , like Google's page rank, the number of downloads, the in and outlinks, etc. by its association with some visual variables. Currently we have available: 

    • the size that modifies the radius of each node making it proportional to the metric we want to show, 

    • the fill colour of the node that can be in proportion to another metric. 

    • the  border colour and /or  

    • the shape of the node that can be hexagonal, square, triangular, etc. 

By doing this we can cross multidimensional information at each node thus finding nodes that fulfill different sets of more or less complex criteria.

In WET each visual metaphor runs in its own window where you can zoom, pan etc. Since we have spoken about treemaps on several occasions we will pay more attention to the radial tree metaphor.

The visualisation of the structure is very interesting in itself. Any hierarchy big enough quickly becomes unapproachable even for the one who created it. The Web is a clear example. By visualising the structure it's easy to pinpoint structural errors. 

If we look at the radial tree of InfoVis.net's website during the month of February 2007 (in the enclosed images), we can see that there are a series of pages hanging on the outermost arc that shouldn't be there according to the original design of the website. I discovered a set of human and script errors that occurred when we moved InfoVis.net to a dynamic database scheme in 2005. Realising this by looking to a long table of page names and links to other pages is very difficult.  

ErrorEstructura.png (404623 bytes) Atributos_en.png (421028 bytes)
Errors in the structure of InfoVis.net. Red arcs encircle the nodes incorrectly linked 
Source
: Screenshot by the author
Click on the image to enlarge it
Visual variables associated to metrics: in this case
Shape with Page Rank
Colour with cluster of Keywords used to access the page
Border Colour with Indexed by Yahoo! or not
Size with number of pages served
Source: Screenshot by the author
Click on the image to enlarge it

On the other hand overlaying on the structure the depiction of the usage metrics gives us, as previously said, multidimensional information that enables us to find particular cases or general patterns, depending on our needs. 

For example, we can assign the number of pages requested during a determined time span to the size of the node and the colour to the different clusters of keywords used by visitors to reach that particular page and see whether or not the most requested pages deal with the same keyword(colour). Or we can find at a glance the most visited pages that have a particular Google page rank (not necessarily the most visited ones have the highest ranking in a given period).

RadialLink_en.png (339730 bytes) Estadisticas_en.png (49919 bytes)
Thickness of links proportional to its usage
Source
: Screenshot by the author
Click on the image to enlarge it
Usage statistics when clicking on a node 
Source
: Screenshot by the author
Click on the image to enlarge it

Each one of the links between pages has a determinate thickness that is proportional to the number of times it has been used in a given period of time. Hovering the mouse over the link caused the frequency of usage to appear. By clicking on a particular page we can see the usage statistics of all the available metrics and several bar charts showing the page requests by day of the week, by day of the month and by hour. The page is highlighted in all the visual metaphors. The right button of the mouse opens a pop up menu that allows you to go to the url of the page and shows the in and out-links among other information.

WET has a few more possibilities but it's not in our interest to be exhaustive with its functionalities in this limited space.

On the contrary we think that it would be very interesting to open WET to the experimentation of all InfoVis readers that would like to try it and give us feedback. This could be the first collaborative experience on InfoVis.net about Information Visualisation. In order to do this, soon we'll edit a new article with complementary information along with the instructions to access and use WET. We would be delighted if you could support us in this initiative!


* Supported by funding from CIDEM from the Catalan Autonomic Government
See alsoWET: 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

Links of this issue:

http://www.infovis.net/printMag.php?num=1&lang=2   Num 105 Information Visualisation: Something's moving on the net.
http://www.zaragoza.es   Zaragoza's council website
http://www.infovis.net/printMag.php?num=51&lang=2   Num 51 Treemaps
http://www.infovis.net/printMag.php?num=52&lang=2   Num 52 The Evolution of Treemaps
http://ieeexplore.ieee.org/xpl/freeabs_all.jsp?tp=&arnumber=4271984&isnumber=4271944   Article 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-2014