Choosing a good font size variation algorithm for your tag cloud

Posted on October 29, 2007 by venkat
Filed Under Widgets, Programming.

In a tag cloud, tags which are used more frequently are displayed in a bigger font size. The font size used to depict a tag is a function of the number of times it is used. The simplest implementation is to use a linear function to map the frequency of use of a tag to its font-size in the tag cloud.

Assume, in a tagcloud, the tag which is the least used occurs minOccurs times and the tag which is most used occurs maxOccurs times, and assume we want to map these to font sizes between the range minFontSize and maxFontSize.

A linear mapping would mean the formula used for calculating the font size of a tag which is used occurencesOfCurrentTag times would be:

weight = (occurencesOfCurrentTag-minOccurs)/(maxOccurs-minOccurs);
fontSizeOfCurrentTag = minFontSize + Math.round((maxFontSize-minFontSize)*weight);

Below is a screenshot of a tag cloud which does a linear mapping between font-size and frequency of use (the numbers in brackets next to the tag name). In my data set, some tags like tree occur only 6 times, while the tag shoja occurs 108 times; while most of the tags occur less than 40 times. Due to this distribution, the tag nikon has nearly same font size as tag nature, though the former occurs twice the number of times.

Tag cloud where font size varies linearly with frequency of usage

Logarithmic mapping is an alternative algorithm. The same data set when rendered using this new algorithm looks like:
Tag cloud where font size varies logarithmicaly with frequency of usage

Notice how tags like butterfly, baby, chandru stand-out even though they are not used as frequently as shoja. Also notice how the difference between tags nature and nikon is clear.

The font-size with this mapping would be calculated as:

weight = (Math.log(occurencesOfCurrentTag)-Math.log(minOccurs))/(Math.log(maxOccurs)-Math.log(minOccurs));
fontSizeOfCurrentTag = minFontSize + Math.round((maxFontSize-minFontSize)*weight);

i.e. we are using log of the frequency of occurence of the tag instead of plain frequency.

Dekoh provides an open source tag cloud widget that does logarithmic font size mapping. You can embed the widget in your application whether you use Java/Ruby/PHP on your backend.

I have taken the above screenshots with the default style and with “show frequency” and “color variation” options enabled. You can play with the styles and options on our live demo site.

Share: