Most websites I can zip right through, find the information that I need and move on. VisualComplexity.com is definitely not one of those sites–I’m amazed that I’ve never noticed this site before. Right now there’s a 292-thumbnail gallery of various information visualization projects–these thumbnails lead to individual project summary pages with source links, larger pics and short descriptions of each project. This all looks like custom ColdFusion code. It’s taking me a while to get through all 292.

I found this project particularly interesting. Each path, a user clicking through a site, is made up of an entry point and an exit point. In this case I would guess that a blue to dull orange fade would show the direction of the flow of traffic. I would say that collectively and coherently representing bidirectional traffic flow visually is a major achievement. Note: There is a PDF on the site that explains how color is used to represent the direction of the flow of traffic.

Working with log data from webservers, I wrote software that looked at the referrer data and created a site tree. This map of the site is interesting because it is formed by how the users travel through the site. It is the aggregate view of how the user base views the hierarchy of the website. Its intent is to serve as a feedback tool for site designers. Does the user base have the same mental model of the website as the designer?

It would appear that one of the greater challenges presented here, at least algorithmically, would be deciding which pages to represent near the perimeter. It would seem that pages with the most traffic would reach out to the edge of the circle in order to prevent clutter, but then how do you position pages with less traffic? How do you decide when the perimeter is too crowded? Can you somewhat integrate/represent the hierarchical (tree structure) organization of the website visually while focusing on the flow of traffic? More interconnected website designs with less apparent hierarchical structure and with more internal linkages would seem to exhibit chaotic flow patterns. At first glance this map seems to take a “fan blade” approach to keep chaos to a minimum. It would seem that less accessed page structures would fall to the center, or to “less busy” areas. Personally I prefer the image with the “thicker” connections–seems easier to read.

James Spahr at his blog says, “Sadly I haven’t had the time in the last 2 years to do further work on it. (But I have a notebook full of ideas on it). I no longer have access to the equipment I used to make them 2 years ago either. The maps were fairly quick to make (less than a minute), as long as the MySQL server didn’t hit swap space—then all bets were off. I really want to pull out the code and start working on them again. Maybe sometime this winter, after the new year.”

Another reason not to use MySQL, skip the middleman–go right to the disk.

Here’s something random I found, the third principle of map design:

3. SIMPLICITY FROM SACRIFICE
Great design tends towards simplicity. (Bertin) Its not what you put in that makes a great map but what you take out. The map design stage is complete when you can take nothing else out. Running the film of an explosion backwards, all possibilities rush to one point. They become the right point. This is the designers skill. Content may determine scale or scale may determine content, and each determines the level of generalisation (sacrifice).

With no text to identify the pages (information that James Spahr knew because he wrote the program) I would say that this particular map is beautiful, as art. I personally believe that maps such as these are ahead of their time, but still good as sources for inspiration. As you might know, any circular rendering is going to be somewhat computationally intensive and that is going to limit your flexibility in most environments as the user and/or programmer. Of course in the future we might have more time to spend on maps with somewhat “frivolous” beauty.

Personally I lean towards more gritty and quick browser-native HTML/CSS diagrams. If I can’t accomplish something with markup, then as a last resort I would use a server-generated inline GIF/PNG rendering. Using an external plugin/application (even Acrobat) to see your stats really cuts into your productivity. Unless the benefit is extremely apparent (not the case 99% of the time) there’s no sense in not rendering everything directly in the browser window using HTML/CSS. Operationally your basic HTML-based path stats will be more useful because they are convenient, searchable, easy to generate in realtime, etc. Still, going above and beyond the mundane can lead to new insights and sometimes you can only get the bigger picture when you have tons of screen resolution to play with.