Websites as graphs, Visualizing the DOM Structure of Websites

It’s common to talk about the visual aspect of a website, but it’s not common to see the DOM structure of a website represented in a graph like an ADN. The result simply beautiful and impressive, a Java aplet where you can enter your website domain name and which generate a graph similar to the screenshot below. The graph is a simply a reconstruction of the DOM structure of the page, and the different colors represent the different tags for example blue: for links, red: for tables, green: for the DIV tag, violet: for images , yellow: for forms, orange: for linebreaks and blockquotes, black: the HTML tag, the root node and gray for all other tags.

The author have posted some screenshots from different websites such CNN, boingboing, apple, yahoo, google, wired, msn … Looking at the graphs more closely it will give you an impression of looking at an ADN graph, complex, with lot of nodes and different colors ! For the Java-sources addicted, here is the source code of the aplet, and the aplet online. Enjoy !