View your web site as a graph

Matt Forsythe | August 18th, 2006

web tree

If code is poetry, then it is also art. This site allows you to graphically display your web site as a rather elegant heirarchical graphic. The graph above is what happened when we fed Drawn.ca into the engine.

Here’s the legend:

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 grey: all other tags

Notice there are no red dots (tables) in Drawn’s graph? That’s because Johnny is web-standards compliant.

[Link] via

Tags: , , , ,
  • Lone
    My web browser wept silent tears when I put in Amazon.com ;)
  • This is simply the most beautiful translation of HTML into another medium, ever. I am in awe of people who think the way necessary to create programs and sites like this. Thanks for bringing it to my attention. I may use it in my future website design presentations.

    Mike
    MikeLeuszler.com
  • Peter
    I don't think that tables are a sign of a non-compliant website. Tables used to show data (e.g. a bus schedule) are fine. Using a table to create a website layout is not...

    I guess you don't have a bus schedule on Drawn :P
  • Rocky Todd
    Hey! You need to credit the inventor/creator of this amazing app- He's Marcel Salathe and he'd probably like it if I directed you to one of his websites-http://www.onethousandpaintings.com

    Come on Canadians! Give credit where credit is due!
  • jim
    http://flickr.com/photos/tags/websitesasgraphs/

    Don't forget to add them and tag them on Flickr.
  • Holly
    For some reason I think (some of) these would make lovely embroidery patterns. Maybe a toss pillow or tapestry with your website's graph embroidered onto it?
  • It doesn't do the whole site, otherwise the thing could be seen as a malicious app. It just does the page at the url you feed it. It looks kinda nifty, but I've seen many similar Flash & Java applets.
  • go away there's nothing to see
    HELLO WORLD
    THANK YOU TIME MAGAZINE FOR NUKING MY FAVORITE SITE FOR ABOUT A WEEK
    50 SLOWEST WEBSITES OF 2006-7 SHEEEEESH!

    ahem.
  • That shit is just beautiful, i love it! Actually by analysing what each color meant, i actually found what my site is lacking.
  • Louis
    "htmlgraph cannot be instanciated"
    Please tell me that is not a real word.
  • Tables actually are standards complient; they're in the XHMTL specs. The word you were looking for was semantic. Your designer designs with semantics in mind (and probably accessibility, for that matter), and therefore doesn't use tables in a circumstance when tables should not be used.
  • A quite intrestingidea is realized in this website! And a good and easy to handle design has been found too!
  • A quite intrestingidea is realized in this nice website! And a good and easy to handle design has been found too!
  • Just wow...
  • a-piao
    I think this article is in a better place
  • Kunsthandwerk
    There are many informations in the comments. Nice.
blog comments powered by Disqus