Visualizing Web Pages - HTML Graphs

FractaLog web graph. Click to enlarge. As an interesting follow up to my recent post on KartOO and Google Browser, check out the HTML Graphlet applet created by Sala (no last name), and posted on the Aharef blog. To use the applet, just enter the URL of the page to be graphed.

The applet constructs multi-colored graph of nodes and edges, with each color representing a different HTML tag. As the graph is produced, it grows outward, with branches sprouting - all in a very kinetic/organic way.

The color of the nodes refer to specific HTML tags:

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
gray: all other tags 

The image at the top of this post is a map of FractaLog as of the date of this posting.

Sala asks that those with flickr accounts post a screenshot of their site tree, using websitesasgraphs for a tag. Click on this link to see a wide variety of web page graphs.

Some of these graphs are more fractal-like than the others. I can only hope that someday the FractaLog graph will look suitably fractal to deserve its name.

Update on Thursday, May 31, 2007 by R.A. DiDio

Note:  Just as I published this post, the link to the Graphlet is not working - nor is the link to Aharef.  I am getting  a "WEb Site Suspended" message.

If it is working for anyone, please let me know with a comment here.