Randy KrumDesigner | Author | Instructor | Speaker

Randy Krum

Designer | Author | Instructor | Speaker


Cool-Infographics-Book-Cover-White.jpg

FREE Sample Chapter

Webpages As Graphs - Cool HTML visualizer applet

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.

Webpages+as+graphs+-+Apple.jpg

Google.com:  Known for their clean front page.

Webpages+as+graphs+-+Google.jpg

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

Webpages+as+graphs+-+Lifehacker-1.jpg

Found on VisualCompexity.com

Visual Map of 30 Free Online Promotion Websites

Visual Map of 30 Free Online Promotion Websites

The Ambient Life (an infographic video)

The Ambient Life (an infographic video)