View websites as graphs

A friend of mine gave me a link to an interesting turnaround on how to “view” a website. First, the website structure is parsed using HTMLParser, then the tags are displayed in a tree view using Processing and Traer Physics, using the following color codes:

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

You can visit the page describing how it works and check out a few samples, or you can generate your own graph. The source code for the applet is also available.

Here’s the graph for tudy.ro:

graph for tudy.ro

Quite nice, I would say: lots of divs and links, a small table (the calendar) in the upper left side, a few scarce images here and there… You can clearly identifiy the main text on the page by all the paragraphs and the blockquotes. Awesome stuff! :)

    • Mihai
    • July 7th, 2006 1:12pm

    Check the “forest” on yahoo… :)

  1. Really cool visualization of websites. Does anybody know where to find the source code of this applet?

    • Tudy
    • September 18th, 2006 4:02am

    You could try contacting the person who made it directly, and see whether you can obtain a copy of the source…

  1. No trackbacks yet.

Comments will be sent to the moderation queue.

CommentLuv Enabled