Creating a Tag Cloud in C#
I wanted to add a TagCloud
to GeekZilla. The first thing I did was look around the web for some
examples (or free components). To my supprise none jumped out at me.
So, I decided to write my own.
At first I found myself wondering how I would render different size
words randomly within a <div>. How would I be able to position
them in relation to each other? float:right?? After looking at a few
tag coulds de.licio.us , dotnetkicks etc I discovered that tag clouds are infact displayed in alphabetical order and the word size doesn't change much.
My Needs
The TagCloud
would need to be able to be generated from a DataTable containing the
columns 'tag' and 'count'. In my case the data would come from a Sql
Server 2005 database. At the database level I'd be doing the
aggregation and ordering. The TagCould code would only need to worry
about weighting the tags.
The Data
First of all I created a view of all tags with their grouping:
SELECT TOP (60)
COUNT(1) AS Count,
Tag
FROM
dbo.ContentTag
GROUP BY
Tag
ORDER BY
'Count' DESC
I then created a stored procedure which would return me the top 60 tags ordered alphabetically:
SELECT
*
FROM
vwTagCloud
ORDER BY
Tag
The UI
I decided to place the tag control within a UserControl incase I
needed to include it in more than one page, in the end it was only used
in the MasterPage.
I created a method called GetCloud() which would contain the logic
for the tag weighting. The method accepts a DataTable and a String
based Cloud Template. The Cloud Template is tokenised, the replaced
version is returned for each tag in the DataTable.
/// <summary>
/// Return a tag could.
/// </summary>
/// <param name="tagData">DataTable containing the columns 'tag' and 'count'</param>
/// <param name="cloudTemplate">
/// The template to return for each iten. Should include $tag$ and
/// $weight$ which will be replaced with actual data
/// <example><h$weight$><a href='#$tag$'>$tag$</a></h$weight$></example>
/// </param>
/// <returns>String containing tag cloud</returns>
private string GetCloud(DataTable tagData, string cloudTemplate)
{
Next I included some validation on the input table.
// Check the input data
if (!tagData.Columns.Contains("tag"))
throw new Exception("Expected column 'tag' is missing");
if (!tagData.Columns.Contains("count"))
throw new Exception("Expected column 'count' is missing");
Now time to get down to business. To figure out the weight of the
tag I first needed to know the Min and Max tag occurances. For this I
used DataTable.Compute(). You can see more information on the Compute()
method in my article about EvaluatingExpressions.
// Lets get cracking
StringBuilder outputBuffer = new StringBuilder();
double max = 0;
double min = 0;
// Use Compute to get the min and max counts
double.TryParse(tagData.Compute("min(count)", null).ToString(), out min);
double.TryParse(tagData.Compute("max(count)", null).ToString(), out max);
With the Min and Max known I could loop through the DataTable figuring out the tag weight.
// Loop through the data, generate the tag cloud
foreach (DataRow row in tagData.Rows)
{
First of all I needed to calculate the weight as a percentage. For
this I divided the number of occuances by the maximum occurances and
multiplied it by 100.
// work out the weight
double weightPercent = (double.Parse(row["count"].ToString()) / max) * 100;
int weight = 0;
With the weight percentage I apply a bunch of cascading 'if'
statements to figure out which weight classification the tag belongs to
if (weightPercent >= 99)
{
//heaviest
weight = 1;
}
else if (weightPercent >= 70)
{
weight = 2;
}
else if (weightPercent >= 40)
{
weight = 3;
}
else if (weightPercent >= 20)
{
weight = 4;
}
else if (weightPercent >= 3)
{
//weakest
weight = 5;
}
else
{
// use this to filter out all low hitters
weight = 0;
}
Lastly I replace the tokens in the cloud template and append the result to a StringBuilder.
// don't return data for unweighted items
if (weight > 0)
outputBuffer.Append(cloudTemplate.Replace("$weight$",
weight.ToString()).Replace("$tag$",
row["tag"].ToString()).Replace("$urlencodetag$",HttpUtility.UrlEncode(row["tag"].ToString())));
}
When all are evaluated, return the StringBuilder
return outputBuffer.ToString();
}
CSS
Ok, this code generates a bunch of Anchor tags. I'd need to use CSS
to make the thing look decent. The cloud template used the weight to
assign an appropriate style to each tag. The styles used are
- weight1
- weight2
- weight3
- weight4
- weight5
The following StyleSheet was created to bring these tags to life within a <div> called tagCloud
<style>
#tagCloud
{
width:238px;
border:solid 1px #ccc;
padding:5px;
margin-bottom:10px;
text-align:justify;
}
#tagCloud A
{
text-decoration:none;
margin-left:5px;
margin-right:5px;
font-family:Trebuchet MS, Verdana, Arial;
text-transform:lowercase;
}
#tagCloud A:hover
{
color:#00cc00;
text-decoration:underline;
}
#tagCloud A.weight1
{
color: #ff9900;
font-size: 1.9em;
font-weight:bolder;
}
#tagCloud A.weight2
{
color: #4169e1;
font-size:1.5em;
font-weight:bolder;
}
#tagCloud A.weight3
{
color: #009eff;
font-size: 1.4em;
font-weight:bolder;
}
#tagCloud A.weight4
{
color: #4188cf;
font-size: 1.2em;
}
#tagCloud A.weight5
{
color: #83bcd8;
font-size: 1.0em;
}
</style>
Adding my cloud to the UserControl
Html
The Html is really simple, as you can see below:
<div id="tagCloud">
<asp:Literal ID="CloudLiteral" runat="server" />
</div>
Code Behind
The Page_Load() calls my DataAccessLayer to get the DataTable and passes the data to the local GetCloud() method. Note the use of ResolveClientUrl
protected void Page_Load(object sender, EventArgs e)
{
String browseUrl = Page.ResolveClientUrl("~/TagBrowse.aspx");
CloudLiteral.Text = GetCloud(ContentTag.GetCloudData().Tables[0],
"<a class='weight$weight$' href='" + browseUrl + "?tag=$urlencodetag$'>$tag$</a> ");
}
The Result
You can see the result of my efforts right here on GeekZilla, if
you're interested in using or enhancing this code, feel free to
download the example application linked from the bottom of this
article.
I hope my code makes your life a bit easier, if nothing else I hope
it inspires you to add a cloud to your site... doesn't just have to be
for tags 