Graph Visualisation

Have you ever tried to visualise an amount of associated entities? You will most likely have touched the field of graph visualisation.

I have recently started to play with some ways to use software for the visualisation of this kind of information, which are widely known as »graphs«. During the recent years and while doing research for my exam thesis on dynamic user-defined information visualisation I came across a lot of different approaches to this field. Obviously a whole crowd of mathematicians is working on the problem of how to lay out objects on a plane so that it makes sense (leaving open what this means, off course).

Force Directed Layout

One interesting class of layout algorithms that computer scientists have equipped us with are called "spring algorithms", "force-directed placement" or force-directed layout". This attempts to solve the problem of layout by simulating objects (nodes) that repel themselves while being attracted by lines (edges) inbetween the nodes. The benefit is that interlinked nodes (theoretically) appear close to each other while disconnected nodes appear distant.

Implementations of force directed placement algorithms can be found and explored on the net:

GraphLayout Demo including source code from Sun's JDK 1.0 Demo
TouchGraph - an open source Java implementation
ThinkMap - a commercial engine

Mapping Web sites using TouchGraph

It seems ovious that force directed laout engines could be used in order to visualise web sites. So I tried and mapped... It took a robot in order to gather the structure from a live web site. I took LinkLint, a web crawler written in perl, and modified it so it would output the pages and links in a simple XML file. Then I added an XML import to the touchgraph demo application in order to read that data. The results are quite funny.

Output to vector graphics

Graphs tend to become complex, and readability of a graph depends on screen resolution and size. But, when printed on paper, much higher resolution can be produced. That's one reason why I decided to add a PostScript output to Touchgraph.

Here is how it looks like (converted to PDF). If you are using Acrobat Reader, try to activate Antialiasing in the Preferences in order to get smoother lines and heaten up your CPU. :)

1. [fbdesign.pdf] (PDF, 21 KB)

Mapping of www.ds.fh-koeln.de

2. [selfhtml.pdf] (PDF, 30 KB)

Mapping of selfhtml.teamone.de

3. [mehrwert.pdf] (PDF, 7 KB)

mapping of www.mbfg.de

4. [denkmale.pdf] (PDF, 3 KB)

mapping of a semantic structure of an article on design history (unlabeled)

5. [denkmale_labeled.pdf] (PDF, 13 KB)

mapping of a semantic structure of an article on design history, including labels

6. [fbdesign_labeled.pdf] (PDF, 63 KB)

mapping of www.ds.fh-koeln.de, including labels