RichardHarlos.com

Insightful opinions without the smoke and mirrors.

RichardHarlos.com random header image

Websites as graphs - an HTML DOM Visualizer Applet

June 4th, 2006 · 2 Comments

website as graphSee that image, at left?

That’s this blog as of noon on Sunday, 04 June 2006.

The graph was generated by an applet, written by a guy named Sala. He’s the same guy who did the OneThousandPaintings.com project, where I was fortunate enough to be buyer #87 (you can read more about that event in my blog post entitled I just bought ‘555′ at OneThousandPaintings.com.

Just today I learned that he’s also in a band called Iceland Chronicles, which has its own MySpace page called Phebus.

Anyway, back to this blog’s website as a graph. If you’d like to see the ‘big picture’ of that little image, click here. And if you’ve got a blog or webiste of your own, or are just curious what one of your favorite sites might look like when graphed like this, please visit Sala’s HTML DOM Visualizer Applet now!

Tags: Uncategorized

2 responses so far ↓

  • 1 Paul -V- // Jun 6, 2006 at 11:17 am

    I saw that Visualizer applet a week ago, and it’s confirmed my view that blogs should be visualized like trees.

    It’s a neat applet that every serious blogger should try out.

  • 2 Richard // Jun 6, 2006 at 11:26 am

    I initially thought along the same line you described, Paul. Then I found out something that surprised me: the tree-like structure does not represent an entire site: it’s only weeding through the first page!?

    Seriously.

    A site with a default page that’s simple will produce a simple graph, regardless of how many pages may be on that site. Similarly, a site with just one page, albeit a complex one, will spider out like nobody’s business.

    The key to recognizing this fact is in the color-key of the site itself, which follows:

    What do the colors mean?

    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

    None of what I’ve written was meant to disagree with your view of blogs as trees. I just wanted to inform your understanding of the graph itself because, like you, I originally thought the graph was the site but it’s not; it’s just the page.

    Have a great day!

Leave a Comment