BugHunter

Tag Cloud April 24, 2007

How to Make Tag Cloud

Just See as a Algorithm.

Step 1 – Get a list tags, and their frequency

<cfquery datasource=”#dsn#” name=”tags”>
 SELECT COUNT(tag) AS tagCount, tag
 FROM tblblogtags
 GROUP BY tag
</cfquery>
In my tag cloud I list all my tags, but if you have a lot of tags you may want to limit the min number of occurrences using a HAVING statement. For example HAVING tagCount > 5

Step 2 – Find the Max and Min frequency

<cfset tagValueArray = ListToArray(ValueList(tags.tagCount))>
<cfset max = ArrayMax(tagValueArray)>
<cfset min = ArrayMin(tagValueArray)>

Step 3 – Find the difference between max and min, and the distribution

<cfset diff = max – min>
<cfset distribution = diff / 3>
You can define the distribution to be more granular if you like by dividing by a larger number, and using more font sizes below. You will probably need to play with this to get your tag cloud to look good.

Step 4 – Loop over the tags, and output with size

<cfoutput query=”tags”>
 <cfif tags.tagCount EQ min>
  <cfset class=”smallestTag”>
 <cfelseif tags.tagCount EQ max>
  <cfset class=”largestTag”>
 <cfelseif tags.tagCount GT (min + (distribution*2))>
  <cfset class=”largeTag”>
 <cfelseif tags.tagCount GT (min + distribution)>
  <cfset class=”mediumTag”>
 <cfelse>
  <cfset class=”smallTag”>
 </cfif>
 <a href=”/tag/#tags.tag#” mce_href=”/tag/#tags.tag#” class=”#class#”>#tags.tag#</a>
</cfoutput>

Step 5 – add css classes to your stylesheet

.smallestTag { font-size: xx-small; }
.smallTag { font-size: small; }
.mediumTag { font-size: medium; }
.largeTag { font-size: large; }
.largestTag { font-size: xx-large; }

This article’s owner is Pete Freitag