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:
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
… and they’ve kindly provided a java applety thing to make your own pictures with. Lovely chap(ess?).
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…
Hello. I am 
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.
That’s purdy. Like website DNA. Just surprised your’s doesn’t reflect a certain chemical structure…