Beyond Tag Clouds: TagArcs for WordPress Tag Visualization

nise english, Tech

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?

Ähnliche Beiträge:

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

  1. Портал новостей https://hand-store.ru о высоких технологиях и IT-индустрии. Последние события в мире программирования, искусственного интеллекта, стартапов, гаджетов и цифровых технологий. Читайте обзоры, аналитические материалы и важные новости технологического рынка.

    Reply

  2. Новостной портал https://newsn.ru — свежие новости России и мира, политика, экономика, общество, технологии и культура. Оперативные публикации, аналитические материалы и главные события дня. Узнавайте важные новости первыми и следите за развитием событий онлайн.

    Reply

  3. Консультация семейного юриста поможет быстро разобраться в сложных жизненных ситуациях: развод, раздел имущества, алименты, споры о детях и брачные договоры. Перейдя по запросу цены адвокатов по семейным делам в Москве – специалист объяснит ваши права, оценит перспективы дела и предложит оптимальный план действий. Получите профессиональную юридическую помощь и ответы на все вопросы по семейному праву.

    Reply

  18. Hello lads!
    I came across a 155 helpful tool that I think you should check out.
    This resource is packed with a lot of useful information that you might find helpful.
    It has everything you could possibly need, so be sure to give it a visit!
    https://www.wownwell.com/10-best-exercises-for-women/

    Additionally do not neglect, folks, that you at all times can inside this particular piece locate solutions to address the the very complicated queries. Our team attempted to present the complete information in the most most accessible manner.

    Reply

  20. I’m not sure exactly why but this blog is loading incredibly slow for me. Is anyone else having this problem or is it a issue on my end? I’ll check back later on and see if the problem still exists.

    Reply

  21. I’ve been exploring for a bit for any high quality articles or blog posts on this sort of area . Exploring in Yahoo I at last stumbled upon this website. Reading this info So i am happy to convey that I’ve an incredibly good uncanny feeling I discovered exactly what I needed. I most certainly will make sure to don’t forget this web site and give it a glance regularly.

    Reply

  22. Fascinating blog! Is your theme custom made or did you download it from somewhere? A theme like yours with a few simple adjustements would really make my blog shine. Please let me know where you got your design. Appreciate it

    Reply

Leave a Reply to hand-store 217 Cancel reply

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