Today I received a message from a friend pointing me to some artwork based on DNA. It's a pretty cool idea. However, when I looked at it I thought that it looked very familiar because I had used a web tool to create a similar image based on my website back in 2006.
It turns out that tool is still online and they even cite DNA 11 as the inspiration behind the idea. No wonder it looked familiar! Curious, I decided to create a new DNA image for this site.
It's changed quite a bit these past six years!
While I was checking out my old DNA image I also came across this other cool graphic representation of the site from back in 2006; this one is a tree.
I really like that one. It uses different colors to represent different html tags used within your website. Curious I revisited the tree building tool (warning, uses a java applet) and recreated it for 2012 as well.
It has gotten a lot more complicated and the branches and leaves look a lot smaller - that's because there are so many of them. Here is the color key:
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
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