Visualizing a map of your blog

Let's pretend you're not busy today and that you have enough spare time to load a Java applet that will show you a map of your blog -- or your web site -- looking like a bouquet of flowers of different colors. It will not take you lots of time, it's -- almost -- useless, but it's fun to watch the creation of the map in real time. I've seen several references to this tool today, but the one from Kate Trgovac, who lives in Toronto, Canada, was the first I saw. Thanks Kate!

Kate wrote that "Aharef has created a cool applet that lets you see the HTML structure (the DOM) of your blog or website as graph. The applet creates these amazing flower-like visuals of websites and blogs."

It seems that the creator of this applet lives in Switzerland. And here is what he writes about this visualization applet.

HTML consists of so-called tags, like the A tag for links, IMG tag for images and so on. Since tags are nested in other tags, they are arranged in a hierarchical manner, and that hierarchy can be represented as a graph. I've written a little app that visualizes such a graph, and here are some screenshots of websites that I often look at.

As an example, here is a small map -- flower -- for one of my other blogs, Blogs for Companies (Credit: Aharef).

If you need a legend for the colors, here they are: 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; and gray: all other tags

Enjoy, have fun and say thanks to the author!

Sources: Kate Trgovac, MyNameIsKate.ca, May 28, 2006; and Aharef blog