
Websites as graphs is a fun and interesting visualisation tool. This is a screen shot of the web graph generated by the index page of my other blog inaminuteago . Markup languages like HTML and XML describe documents as hierarchies of tags, in what is called a Document Object Model (DOM). This structure can be visualized as a graph. The graph above visualises the DOM structure of my page. The colours each indicate a different thing such as blue for links (the A tag, red for tables (TABLE, TR and TD tags), green for the DIV tag, violet for images (the IMG tag), yellow for forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags), orange for linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags), black the HTML tag, the root node and gray for all other tags
The graph is a more a toy than a tool as it would be nice if the document name appeared in a tool tip type display when you passed your mouse over a point but its fun. The applet isn’t showing a whole web site, but a single web page. Since the applet was designed by Sala, a conceptual artist living in Zurich, Switzerland perhaps viewing these graphs from a purely practical angle is not the point. If you see code as a thing of beauty you will easily ‘get it’
Here is another graph taken from a page of the same blog. It is a page that provides information about a challenge I am currently running.

This visualisation is of the index page to my site.

Another page on my site is an index to information on how to do needlework stitches in other words a stitch dictionary . This is how it looks.

This visualization is the index page of this blog

As I was playing around with these images I thought about translating them into another medium such as textiles. What strange self portrait they would make. A self portrait in the sense that if you see a website as representing the author then it’s only a step to seeing these visualisations as a form of self representation. Or perhaps re-presentation. It is an idea at least worth teasing out a little.
You can check out other peoples graphs on flickr under the websitesasgraphs .