Tag cloud alogrithm

Song tag cloud for MusecastOne of the site’s features is a tag and song “tagcloud” used to show which tags are popular and which aren’t. The idea is simply, for tags that are popular, you emphasise them more, this can be done in terms of font weight, size, colour and whatever styling method that enables the text to be highlighted from another text.

Right now I’m only using the font size as a way of demonstrating the tag cloud but perhaps if theres time I could go about doing it for font colour too (which might need a bit of configuring to ensure it works).

I’ve managed to stumble upon this article which helped me out on how I should establish the correct distribution of font sizes etc so I’ll be using it for making the tag cloud.

http://semanticvoid.com/blog/2006/01/06/tag-cloud-font-distribution-algorithm/

The article is pretty small but does the job

Ever thought of how the collection of tags with varying fontsizes (known as Tag Cloud) populated. As I say ‘theres an algorithm for everything’, theres an algorithm for this too. Assuming you know all about tag popularity (if not refer previous post) I’ll go ahead explaining it.

The distinct feature of tag clouds are the different groups of font sizes. Now the number of such groups desired depends entirely upon the developer. Usually having six such size-groups proves optimal.

Assume any suitable metric for measuring popularity (for instance ‘number of users using the tag’). We can always obtain the max and min numbers for the same. For example:

max(Popularity) = 130
min(Popularity) = 35

Therefore we can define one block of font-size as :
( max(Popularity) - min(Popularity) ) / 6

For the above values we get one such block range as (130 – 35) / 6 = 15.83 ~ 16
Font-sizes therefore could be bound as follows:

Range Font-Size
35 to 51 1
52 to 68 2
69 to 85 3
86 to 102 4
103 to 119 5
120 to 136 6

Update
Tonight I managed to create the tag cloud. Not only that, I turned it into a function so that it can be used for more then just the admin pages. The coding was pretty much based on the above calculations to come up with the right sizes, I used percentages to portray the font sizes as it seems more relative to the web page.

1 Comment

Tags: ,

1 Comment to Tag cloud alogrithm

  1. Alex says:

    I used a similar calculation on my tag cloud I’ve just built for my new site…

    I get the following variables from the database:

    $max – the number of times the most popular tag has been used.
    $min – the number of times the least popular tag has been used.
    $distribution – ($max – $min) / 5;

    Then I just go through each tag from the database and select the CSS class for each one…

    Let’s say that $tagcount is the amount of times a specific tag has been used…

    if($tagcount == $min){
    $class = “link13″; /* smallest */
    }elseif($tagcount == $max){
    $class = “link28″; /* biggest */
    }elseif($tagcount > ($min + ($distribution*2))){
    $class = “link26″; /* big */
    }elseif ($tagcount > ($min + $distribution)){
    $class = “link20″; /* medium */
    }else{
    $class = “link15″; /* small */
    }

    It’s a bit quick and dirty but it works (so far)

Leave a Reply