About

Randy Krum infographic designerRandy Krum

President of InfoNewt.
Data Visualization, Infographic Design, Visual Thinking, Product Development and Marketing professional fascinated by good infographics.  Always looking for better ways to get the point across.

Infographic Design

Infographics Design | Presentations
Consulting | Data Visualizations

DFW DataViz Meetup

Join the Meetup Group if you’re in the Dallas/Fort Worth area!

Search the Cool Infographics site

Custom Search

Subscriptions:

 

Feedburner

The Cool Infographics® Gallery:

How to add the
Cool Infographics button to your:

Cool Infographics iOS icon

- iPhone
- iPad
- iPod Touch

 

Read on Flipboard for iPad and iPhone

Featured in the Tech & Science category

Flipboard icon

Twitter Feed
From the Bookstore

Caffeine Poster

The Caffeine Poster infographic

Google Insights

« Visual Map of 30 Free Online Promotion Websites | Main | The Ambient Life (an infographic video) »
Tuesday
Nov172009

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.




PrintView Printer Friendly Version

EmailEmail Article to Friend

Reader Comments (3)

this is really fascinating. thanks.

December 17, 2009 | Unregistered CommenterAnonymous

This is science as art!

December 17, 2009 | Unregistered CommenterBill Krum
You have mention good post above I really enjoy the information. I wish to come again on your site in future
August 12, 2010 | Unregistered Commenter传世私服

PostPost a New Comment

Enter your information below to add a new comment.
Author Email (optional):
Author URL (optional):
Post:
 
All HTML will be escaped. Hyperlinks will be created for URLs automatically.