Aharef has an interesting project going on here, which interprets popular websites as graphs.

Unlike a lot of other website-visualization projects I’ve seen (where the nodes are webpages, and if a link exist betweens one webpage and another, there exists an edge between the webpages’ respected nodes), this project instead has graphs which represent html tags as nodes and the edges are created as a result of the hierarchical nature of tags. Or, for instance, let’s say there was an image tag within a link tag, then there would be an edge connecting those tabs’ respected nodes together.

Aharef colored the nodes based on what type of tag each node represents. For instance, dark blue nodes represent link tags and red nodes represent table tags. The piece was written using Processing and actually runs in real time–you type in a website, it goes to the website’s source code and calculates the graph.

One of the interesting depictions on the site is of boingboing.net:

You can see that the website has one large tag which has many many other tags within it.

I still code in html, so it was interesting for me to see these pictures because I can really see how the website designer structured the site. Although, I wonder if someone who was not familiar with html would find it interesting (besides the project’s aesthetic nature–the graphs themselves are very nicely layed out and colored).