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++;
}

$postslist = get_posts($options);
global $wpdb;
foreach ($postslist as $post){
setup_postdata($post);

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);

var layout = vis.add(pv.Layout.Arc)
.nodes(nodes.nodes)
.links(links.links);

layout.link.add(pv.Line)
.lineWidth(function(d) d.linkDegree*0.1);

layout.node.add(pv.Dot)
.size(function(d) d.linkDegree + 2)
.fillStyle(pv.Colors.category20().by(function(d) d.group))
.strokeStyle(function() this.fillStyle().brighter());

//layout.label.add(pv.Label);

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.

These are the TagArcs of my blog. In comparison to arcs above it can be seen that there have been more separated post clusters during the past years. Almost in the center of the time line the posts were very closely linked with each other. Recent activity is strongly related to a bunch of post I have been written two years ago.

 

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?

3 thoughts on “Beyond Tag Clouds: TagArcs for WordPress Tag Visualization

  1. Not jet. There were some problems with the performance. Hence upcomming tags need to added rather that grasping all tags from post all over again.

  2. Hi!

    I find this post via google when I look for visualization tool for wordpress. Have you already released this plugin? I’m very curisou about using your amazing plugin!

    Sa

Leave a Reply

Your email address will not be published. Required fields are marked *