How to build a tag cloud in less than an hour
Several days ago, I noticed that I needed to create a simple tag cloud for the web2.0 project that I'm currently building.
If your database is structured properly your logic is dead simple:
Let us assume that you have a bunch of tags, and each tag has a rating (a double number) associated with it. If you know the maximum rating and the minimum rating, then writing a mapping function from ratings to percentages is a piece of cake:
If you observe the method carefully you will see that it is nothing but the equation of a line with two fixed points given.
The method above maps current rating to a number between 70 and 400 (which we will use in the css to scale the tag).
We then use a simple repeater (or a similar structure depending on the web application of choice)
[div id="ListAllTag" runat="server"]
[asp:repeater id="TagList" runat="server"]
[itemtemplate]
[a href="/tag/[%#DataBinder.Eval(Container.DataItem,"lngTagID")%]" style="font-size:[%#DataBinder.Eval(Container.DataItem,
"intCalculatedPercentage")%]%;"][%#DataBinder.Eval(
Container.DataItem,"strTag")%][/a]
[/itemtemplate]
[/asp:repeater]
[/div]
That's it. You bind your query to the repeater; calculate intCalculatedPercentage using ToRatingPercentage method given above and you're done.
Here is how the final result looks like:

bu yaziyi sevdin mi?
hemen
una ekle!
If your database is structured properly your logic is dead simple:
Let us assume that you have a bunch of tags, and each tag has a rating (a double number) associated with it. If you know the maximum rating and the minimum rating, then writing a mapping function from ratings to percentages is a piece of cake:
Actually deriving the formula took some time; I travelled back in time to my high-scool geometry classes :)
public static int ToRatingPercentage(int currentRating,
int minRating, int maxRating)
{
double minBound = 70d;
double maxBound = 400d;
return Converter.ToInteger(
Math.Ceiling(((
(maxBound-minBound)/(double)(maxRating-minRating))
*currentRating) +
(minBound*maxRating-maxBound*minRating)
/(double)(maxRating-minRating)));
}
If you observe the method carefully you will see that it is nothing but the equation of a line with two fixed points given.
The method above maps current rating to a number between 70 and 400 (which we will use in the css to scale the tag).
We then use a simple repeater (or a similar structure depending on the web application of choice)
[div id="ListAllTag" runat="server"]
[asp:repeater id="TagList" runat="server"]
[itemtemplate]
[a href="/tag/[%#DataBinder.Eval(Container.DataItem,"lngTagID")%]" style="font-size:[%#DataBinder.Eval(Container.DataItem,
"intCalculatedPercentage")%]%;"][%#DataBinder.Eval(
Container.DataItem,"strTag")%][/a]
[/itemtemplate]
[/asp:repeater]
[/div]
That's it. You bind your query to the repeater; calculate intCalculatedPercentage using ToRatingPercentage method given above and you're done.
Here is how the final result looks like:

bu yaziyi sevdin mi?
hemen
una ekle!












