Websites as Graphs

Thanks to Leslie, I’ve been entertaining myself for the last fifteen minutes with this great little Java applet that can turn any website into a graph. For a simple example, see my portfolio (shanelavalette.com): Here’s an explanation of how it works from Sala, the creator:

Everyday, we look at dozens of websites. The structure of these websites is defined in HTML, the lingua franca for publishing information on the web. Your browser’s job is to render the HTML according to the specs (most of the time, at least). You can look at the code behind any website by selecting the “View source” tab somewhere in your browser’s menu. 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.

Sala has written an applet that visualizes such a graph. As you might expect, the visualization get more interesting when there are more tags. Here’s what this blog looks like (shanelavalette.com/journal): Curious what the colors mean? blue: links (the A tag) red: tables (TABLE, TR and TD tags) green: the DIV tag violet: images (the IMG tag) yellow: forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags) orange: linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags) black: the HTML tag, the root node gray: all other tags Here’s Google (google.com): Looking at the graphs themselves is interesting - in fact, there’s a Flickr group dedicated solely to these sorts of images - but the applet also animates the graphs, allowing you to watch them grow from the HTML tag, the root node. Pretty neat. Head to the site and try it for yourself!