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 .
March 9, 2007 at 12:51 pm
Sharon, these look for all the world like the Queen Anne’s Lace flower, especially the stitch dictionary visualization.
There must be some universal organizing principle at here…but I don’t know what it is!
March 12, 2007 at 1:58 am
Sharon, What a fun place. I did my blog page and the only other address I could think of offhand — hp.com! I agree with Allison, as it does look like Queen Anne’s Lace. You know, you are a constant source of fun, education, and points of interest. I am going to add this site to my list of favorites. I am loving the encrusted class, by the way!
March 12, 2007 at 6:02 am
Alison and Kathy - yep they are interesting images and I found them fascinating
Kathy i am pleased you are enjoying the blog