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?

15 thoughts to “Beyond Tag Clouds: TagArcs for WordPress Tag Visualization”

  1. Nice post. I was checking continuously this blog and I’m impressed! Extremely helpful information particularly the last part 🙂 I care for such information much. I was seeking this particular info for a very long time. Thank you and best of luck.

  2. hello!,I love your writing so a lot! proportion we keep up a correspondence extra approximately your post on AOL? I require an expert in this area to unravel my problem. May be that is you! Looking ahead to look you.

  3. Hi, Neat post. There’s an issue together with your site in web explorer, could test this… IE still is the marketplace chief and a large component of folks will miss your magnificent writing due to this problem.

  4. Very good blog! Do you have any helpful hints for aspiring writers? I’m planning to start my own blog soon but I’m a little lost on everything. Would you recommend starting with a free platform like WordPress or go for a paid option? There are so many options out there that I’m completely overwhelmed .. Any ideas? Many thanks!

  5. I was curious if you ever thought of changing the page layout of your site? Its very well written; I love what youve got to say. But maybe you could a little more in the way of content so people could connect with it better. Youve got an awful lot of text for only having one or 2 images. Maybe you could space it out better?

  6. you are really a good webmaster. The website loading speed is amazing. It seems that you’re doing any unique trick. Furthermore, The contents are masterwork. you’ve done a fantastic job on this topic!

  7. What i don’t realize is in truth how you’re not actually a lot more well-favored than you may be now. You’re so intelligent. You understand thus significantly in relation to this matter, made me individually believe it from a lot of numerous angles. Its like women and men aren’t involved except it is something to accomplish with Woman gaga! Your individual stuffs great. All the time deal with it up!

  8. Thank you for sharing superb informations. Your web site is so cool. I’m impressed by the details that you have on this blog. It reveals how nicely you perceive this subject. Bookmarked this web page, will come back for extra articles. You, my friend, ROCK! I found simply the information I already searched everywhere and just couldn’t come across. What an ideal site.

  9. Normally I don’t read article on blogs, but I wish to say that this write-up very forced me to try and do it! Your writing style has been surprised me. Thanks, quite nice post.

  10. I think other site proprietors should take this website as an model, very clean and excellent user genial style and design, as well as the content. You are an expert in this topic!

  11. I am not sure where you’re getting your info, but great topic. I needs to spend some time learning much more or understanding more. Thanks for wonderful information I was looking for this info for my mission.

  12. 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.

  13. 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 to Lewis Blessman Cancel reply

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