So I’ve always wanted to represent this website to be a visual representation of the “web” that it creates, i.e.:

• each page on the website is a “node” in the graph that makes up the website and should be shown as such
• the website’s relationship with the “rest of the web out there” should also be visible to the user
• navigation from one node to another should be explicit via animation, but once the page is rendered it should behave like any other website.

To do this:

• The home page would start with a display of the website as a graph and the surrounding web cloud.
• Selecting each node would zoom into the page and display it as a normal page
• Hitting “esc” on any page would zoom out just enough to show:
  • connections from that page to other places
  • navigation elements such as lists, tag clouds, etc

So the first step was to convert the website source into a graph. A ruby script later, I had a Graphviz source file that depicted the site, its pages, and their links both within the site and to the rest of the internet. A simple Graphviz dot output looked like this:

Of course, this was pointless, so I tried out all the other rendering engines in Graphviz

FDP:

SFDP:

Osage:

I did not know that Graphviz could do Treemaps, but apparently it can:

2PI, which was somewhat usable: the home page linked to the blog, which was the inner circle, which then linked to various pages on the web, represented by the outer circle.

But by far the most comprehensible ones were those ouput from:

GVMap:

It looked like a country of sorts, with the home page and blog cities. I finally had my home page representation!

Except…I was not sure I should have this as my home page. It did not make it easy to discover content, as the only way to find anythin was to mouse over the dots that represent the documents. Also, and this is stating the obvious, I realized that most people dont really care how they reached a given page, but that they got it. So now working on a semantic zoom widget.