crazybobbles

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