Beyond Tag Clouds: TagArcs for WordPress Tag Visualization

Tag clouds are very useful to visualize the most frequently used tags on a website, e.g. a blog. This is done by steering attention through emphasized words whose font size, color or position stands out. But nothing can be found out about temporal relation of a tag’s posts. For me this became evidently on my own tag cloud (see left) which still rates ‘Lima‘ at the leading position whereas the related articles are more then three years old.
More unfortunately is the missing relation to other tags. While one tag is really highlighted the user can not figure out anything about related tags who may appear concurrently.
In order to push semantic visualization I am going to introduce TagArcs as meaningful and eye catching way to outline relationships between tags and posts.

On the x-axis you can see all posts. Tags itself can be seen as links between posts. The more tags two post have in common the thicker the arc is shown. A TagArc shows links between related posts over time.

To see how looks and to get a feeling for TagArcs I have been developing a tiny WordPress plugin. The powerful visual programming library of protovis has been very valuable for my purposes.

Determine nodes and their linking from WP posts respectively tags.
$options = 'numberposts=500&order=DESC&orderby=date';
$ii = 0;
$arr = array();

$postslist = get_posts($options);
global $wpdb;
foreach ($postslist as $post){
setup_postdata($post);
$name = split(' ', $post->post_date);
$nodes .= '{nodeName:"' . $name[0] . '", group:2},';
$arr[$post->ID] = $ii;
$ii++;
}

foreach (get_the_tags(''.$post->ID) as $tag){
$t = get_posts('tag='.$tag->name);
foreach ($t as $relpost){
if ($relpost->ID != $post_id){
$a = $arr[$post->ID] != null ? $arr[$post->ID] : 0;
$b = $arr[$relpost->ID] != null ? $arr[$relpost->ID] : 0;
if($a > 0 && $b > 0)
$links .= '{source:' . $a .' ,target:' . $b . ',value:1},';
}
}
}
}
Some more lines to feed Protoviz:
var nodes = {nodes:[' . $nodes . ' ]};
var links = { links:[ '. $links.' ]};

var vis = new pv.Panel()
.width(800)
.height(400)
.margin(10)
.bottom(20);

vis.render();
All code snippets from above can be sticked together in a single WordPress plugin which I am going to release as soon as I’ve finished the other visualization ideas for WordPress.

UPDATE: https://github.com/nise/wordpress-tag-arcs

Possible improvements of TagArcs could be:
* display exact temporal position on x-axis
* use different colors for post within the same category
* enable interaction, e.g. hiding not selected tag-relations or show meta data when hovering a post dot or tag arc.
* filter by category, common tag count, time, …
* compare two categories by their intermediate tags

Any other ideas?