Webpages As Graphs - Cool HTML visualizer applet

Marcel Salathe has created Webpages As Graphs, an interactive HTML DOM visualizer applet that will view any http:// website in a graphic form.  The image above is Cool Infographics, but the arrangement comes out a little different every time you run it.

Using Processing, Traer Physics and HTMLParser the site lets you enter the domain and then watch while it works its magic.  He has also made the source code available and instructions to print your graph as a poster.

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

I ran it for a number of other websites to see the differences, some were inspired by the examples on Marcel's site.

Amazon.com: Pretty complex site with lots of links, images and tables.

Apple.com: Simple design, as you expect from Apple.

Google.com:  Known for their clean front page.

LifeHacker.com:  Great blog with a very complex structure.

Found on VisualCompexity.com

Comments

[Anonymous]

this is really fascinating. thanks.

[Bill Krum]

This is science as art!

[传世私服]

You have mention good post above I really enjoy the information. I wish to come again on your site in future