Tag clouds give a quick overview of the content. Weighted list is an alternative description of a tag cloud and it gives a visual interpretation of the content, which is typically tags or keywords. The power behind the visual descriptiveness lies in variable font sizes and often also in variable font colors. Whenever there are multiple occurrences of certain tags their font sizes increase according to the number of appearances. This can be put in small saying the more tags the bigger font size is. Controversially the fewer tags the dimmer the font color is. I have implemented a tag cloud of the keywords used in my blog articles. This cloud is shown in my archive where the tag is brighter and bigger in scale the more occurrences are found of that keyword.
Programming a tag cloud like mine is generally quite simple. You will need to know the number of tags to calculate the proper font size and color. You must also determine the minimum and maximum font size as well as the color scale for the font color variation. The rest is simple mathematical calculations. The following program code shows how to implement font variation for a tag cloud written in popular PHP language.
// Set font size limits in pixels.
$minFS = 6;
$maxFS = 40;
// Set font color limits between 0 and 255.
$minFC = 127;
$maxFC = 255;
/*
Get the lowest number of tags at this point using
for example this MySQL query to retrieve the count.
Store the count in $min variable.
SELECT COUNT(*) AS CNT
FROM YOUR_TABLE_HERE
GROUP BY Value
ORDER BY CNT
LIMIT 1;
Get the highest number of tags likewise using
for example this MySQL query to retrieve the count.
Store the count in $max variable.
SELECT COUNT(*) AS CNT
FROM YOUR_TABLE_HERE
GROUP BY Value
ORDER BY CNT DESC
LIMIT 1;
*/
// Loop through the tags.
while () {
// Retrieve the number of each tag
// and store it in $cnt variable.
// Calculate weight of the current tag count
// related to upper and lower limits.
$wg = (log($cnt) - log($min)) / (log($max) - log($min));
// Calculate font size.
$fs = $minFS + round(($maxFS - $minFS) * $wg);
// Calculate font color.
$fc = $minFC + round(($maxFC - $minFC) * $wg);
/*
You have now all required values to print out
the tag with variable font sizes and colors.
Use style attribute to implement inline styling,
like in this example:
style="background-color: transparent;
font-size: $fs px;
color: rgb($fc, $fc, $fc);"
*/
}