Websites as Graphs Meme

Came across this on Joe Dolson’s site, which I really should read more as there’s always loads of interesting stuff on it when I remember to check. Anyway, Joe had a post called View your website structure as a graph, where he included one of these images of his own site.

It looked pretty, so I decided I wanted a go…

It was an absolute joy to watch as the applet built up my site:
ThePickards website graph

What does this show about my site? Well, there’s an <html> element, which has got a clump of “other” tags next to it, which I’m guessing is probably my metadata, stylesheets and so on; you’ve got a few images and links nearby, so I’m guessing that’s my header. Then there’s an enormous sprawly bit over the right of the picture, with loads of divs, blockquotes, paragraphs, links and other miscellaneous elements — which I’m presuming make up my blog posts. After that, there are two more strands. The first has lots of links and a smattering of form elements — which must be my sidebar (that’s the one with the contact, search, archives and category lists). The second is a little sparser, and I’m presuming that it’s my farbar.

Mmm. Pretty pictures.

It’s not surprising to me that the site is fairly complex — a quick glance at the front page, particularly when I’m using wordpress with various plugins — ought to tell you that there’s a lot going on right there on my homepage, but hopefully everyone’s managing to find their way about without too much bother.

Anyway, if you want to work it out for yourself, the key to the image comes from the original site:

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

www.aharef.info

… and they’ve kindly provided a java applety thing to make your own pictures with. Lovely chap(ess?).

Revish Website Graph

Oh, and here’s a picture of the structure of the simple and elegant home page for Dan Champion’s not quite launched yet but you can register for email updates now if you like book review site Revish.

I think it’s plain to see from the graph that Revish has much less on it’s front page than I do. You can see clearly that the sites have different aims: mine is to fit loads of information on; the aim of Revish is to provide a simple, clean home page that currently will allow you to sign up for updates. Different sites, different purposes, and, I think, both perfectly suited to their own purpose…


2 Responses to “Websites as Graphs Meme”

  1. Joe Dolson responds:

    Thanks, Jack!

    It’s irresistably fun, isn’t it! Just watching it unfold…I had to tear myself away from just watching every site I could think of.

  2. Dan responds:

    That’s purdy. Like website DNA. Just surprised your’s doesn’t reflect a certain chemical structure…


Leave your comments

Enter Your Details:




You may use the following markup in your comments:

<a href=""></a> <strong></strong> <em></em> <blockquote></blockquote>

Enter Your Comments:

|Top | Content|


  • Worn With Pride

    • Titan Internet Hosting
    • SeaBeast Theme Demo
    • Technorati
    • Guild of Accessible Web Designers
    • my Facebook profile

Blog Meta

|Top | FarBar|



Attention: This is the end of the usable page!
The images below are preloaded standbys only.
This is helpful to those with slower Internet connections.