The artist/coder Sala, responsible for the 1000 numbers project, has created an applet that turns an web page into a color-coded diagram that depicts the HTML hierarchy. Here’s the main page of Pictures of Numbers when it was displaying the Tufte Library post.

Here’s Sala’s key to the tags:

It’s easy enough to spot out the three book reviews and their covers, the lists of links down the side, and the flurry of forms, text, and image in the colophon.

I know what I’d like: a label beside each node giving the tag class or ID. That would make untangling endless nested DIV tags so much easier. Why doesn’t Dreamweaver have a graphical interface to its code?

Some interesting patterns can be seen on Sala’s site when large sites are compared, and design choices (such as tables vs divs) are revealed—the results reminded me of the haplotype diagrams my officemate generates as part of her research. If you’re interested in other graphical depictions of networks, check out the Visual Complexity site.