In a conversation with Laura Fisher the other day at Cafe Primo, she brought up a notion she’s exploring about a layout for dynamic content: blogs, sites. Something not at all, or not as much, like a printed page or an unrolling scroll.

We discussed treemaps, and the fact that Brian Kerr had already suggested those. I got to thinking about some ideas we explored back in the Data Pageant days for realtime visualization of chatter and buzz about stocks. I wonder if they might be implemented as a relatively simple—and interpretable (and maybe even useful)—blog interface as well.

There are a few problems with treemaps as an interface infrastructure. On the one hand, we use subdivision to indicate hierarchy in treemap layouts, but at the same time we rely on size of cells to communicate something about relative abundance or importance of these hierarchically-organized classes. The mapping of linearly decomposable scales is fine if you’re talking about how something’s subdivided (the stock market, an economy, a list of species), but it doesn’t exactly rock when you need—as with blogging—to highlight something that’s just been added to a collection, against a background of lots of other pre-existing entries. The new entry’s block will over time tend to be a smaller and smaller piece of the big visual pie, and as a result you dilute away your newest stuff at the expense of older things. Then there’s the question of what linearly decomposable thing you’re measuring: words blogged? visitors? page views?

Eh.

So say you have some things. Blog entries, articles, bookmarks, that sort of thing. Let’s stick with blog entries.

These have a few important attributes that you can measure, and care about. In a blogging context, think maybe “post date” and “page rank” and “most recent comment time” and “trackbacks” and “length” and “tag set”. Stuff like that. Note, some might be quantitative variables, some might be categorical; who cares?

Let’s use for example “age” and “tags set” and “page rank” and “most recent comment time”. Off the cuff, say we want to lay out all our blog posts, or maybe the last 100 or so, in a kind of lattice in a rectangular region. Newer posts are closer to the top of the rectangle; posts that are more closely related in tag space are closer to each other horizontally; posts that have larger page rank are larger; comment time is used to highlight posts that have more recent comment activity, and this fades to background over some window of time.

For the sake of simple math, let’s lay the posts out as if they were points in this rectangle.

The age variable is pretty straightforward: we put the newest posts near the top, and the oldest one at the bottom of the range. We could string them out evenly, or proportional to their actual post dates; hold that in mind as an experimental design variable for now.

The horizontal axis is some kind of “similarity”, and it involves the tag clouds (or lacking those, semantically interesting terms) in the posts. To save space and time, let’s elide what happens here by summarizing it as “we cluster them”: we can use a hierarchical clustering algorithm, or a self-organized map, or whatever the heck we want. In the former case, we end up with a tree of some sort, and we’re left with the decision of how to place the various leaves; we could have the bushiest branches in the middle, and the spindly ones at the edges, or order them in decreasing size so the most similar things are all at one side, and the weird miscellaneous things at the other. An SOM provides an explicit spatial arrangement of entries once it’s converged, and we could just map that to the x axis as we see fit. Again, we’re left with a design choice as to whether we space things evenly or proportionally. For example, if we have a hierarchical cluster tree of 100 blog entries, we could trim it a little below the leaves so we get 7 clusters, and give those equal space along the x-axis.

Fiddle around. To be honest I wonder if the scaling thing matters much. Order does, though.

So we have some points scattered in this rectangle. And we’ve imposed an order in both dimensions. Let’s preserve that order by linking these points together in a Delaunay triangulation. Connect the dots; close neighbors are alike, we’ll argue, so tie ‘em up.

And whenever you have a Delaunay triangulation, you have a Voronoi tesselation. And we mentioned “size” being linked to “page rank”, so move the dots around by adjusting the Delaunay link lengths until the areas of the tesserae are as close as possible to the page-rank measure we want to capture. If instead you want all the posts to have equal area, then do that instead: make all the links the same length, as much as possible.

And then paint-by-numbers with “comment time” pigments when you’re done.

Do all this layout business in server-side processing, whenever you post a new article; those variables won’t change. Do the coloring on the fly if you really think your posts’ page-rank will be changing that quickly.

Admittedly, the weird-ass shapes of Voronoi tesserae pose a design challenge for the rollover artist out there, but an interesting and instructive one. Can you make an interesting rollover effect in pure PNG-driven graphics, or do you need to use Flash? Can the points be used as the centers of squares of the right size and shape, or rather can you position the points and then “grow” squares from them until they touch one another, and get an accurate size that way?

Dunno. We were doing stocks, and it was a long time ago. I’d be curious to hear, though.