Blogs as graphs

This is the Blog of Dave Cole in graphic form, from aharef.info via Tom Paine via Matt Sinclair.

Blog as graph

You can make your own for any website at http://www.aharef.info/static/htmlgraph/. I particularly like the unfolding effect when you put in ‘http://news.bbc.co.uk’ as the target.

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

The round-cornered boxes I used on the blog are made with the <DIV> tag, hence the large number of green dots; the cluster of grey dots on their own is, I think, the header and meta tags. There are lots of pictures of websites like the one above at flickr.com/photos/tags/websitesasgraphs.

xD.

Posted on Friday, November 9th, 2007 at 5:09 pm
Categories: Blogging, Geekery.
RSS 2.0 feed for this post
Leave a comment
Trackback

Previous post: Moore in the Autumn at Kew
Next post: Employment wanted
 

7 Responses to “Blogs as graphs”

  1. jameshigham Says:
    November 10th, 2007 at 4:52 pm

    Now that’s very, very cool indeed. Might try this tomorrow.

  2. dave Says:
    November 11th, 2007 at 11:18 am

    Do, and submit it to Flickr with the websitesasgraphs tag. They’re rather fun and watching them expand is quite engrossing.

    On a geeky note, it’s another way of seeing how a page is put together.

  3. Winchester whisperer Says:
    November 12th, 2007 at 9:22 am

    On balance, I prefer autumn at Kew but could could try and auction it at Christies

  4. Bulletin News Says:
    November 13th, 2007 at 3:05 pm

    Greatest view about Blogs as graphs! I enjoy this point of view.

  5. Daniel Says:
    November 15th, 2007 at 11:37 pm

    I couldn’t understand some parts of this article Blogs as graphs, but I guess I just need to check some more resources regarding this, because it sounds interesting.

  6. dave Says:
    November 15th, 2007 at 11:53 pm

    Daniel,

    The best resource I can think of is w3schools.com; that’s how I learnt HTML. Each coloured dot represents a different tag in HTML, and the branches in the picture represent how they are nested within each other.

    xD.

  7. davecole.org » blog » Blog Archive » Blogs as graphs explained Says:
    November 17th, 2007 at 7:34 pm

    [...] put an image in this post that gives a visual representation of the front page of my blog. While everyone seems to find it [...]

Leave a Reply

You can use some HTML tags, such as <i>, <b>, <a> and <blockquote>.