How to create Tag Cloud, Word Cloud or Weighted List

Tag Cloud, Word Cloud or Weighted List is the visual representation of keywords/tags on websites that shows the importance of keyword/tag. I am sharing a simple code to generate a Tag Could. You can download whole code from this location.

First I have created list of Tags. You can use database to fetch the tags and pass them to this list:-
//Creating a list of Tags
List<string> lst = new List<string>();
lst.Add("C#");
lst.Add("C#");
lst.Add("C#");

lst.Add("Asp .Net");
lst.Add("Asp .Net");
lst.Add("Asp .Net");
lst.Add("Asp .Net");
lst.Add("Asp .Net");
lst.Add("Asp .Net");


lst.Add("Javascript");
lst.Add("Javascript");
lst.Add("Javascript");

lst.Add("Ajax");
lst.Add("Ajax");

lst.Add("jQuery");

After that I used LINQ to find group by count of individual Tag. You can also perform that step on database level if you are reading records from database:-
//Grouping tags and calculate their count using LINQ
var tags = (from l in lst
            group l by l into g
            select new { Name = g.Key, Count = g.Count() });

After that I sort the tags in descending order because normally tags are in alphabetical order.
// Sort tags in descending order
tags = (from t in tags
        orderby t.Name descending
        select t);

Here is the interesting part, here you can define minimum font size and maximum font size for tag cloud. Also I calculated the steps which will be there for minimum and maximum size.
//Minimum Size for Tags, you can set it as per your need
double minSize = 10;

//Maximum Size for Tags, you can set it as per your need
double maxSize = 20;

//Calculating the step in which increament the fonts
double steps = (maxSize - minSize) / (double)tags.Count();

Finally I am creating SPAN tags for each tag item with this code:-
StringBuilder sb = new StringBuilder();
        foreach (var tag in tags)
        {
            //Calculating the Size
            double size = minSize + ((double)tag.Count - 1) * steps;

            //Create the SPAN tag with spefic font size so it looks like cloud
            sb.Append("<span style='font-size:" + size + "pt'>" + tag.Name + " </span>");
        }

And Here is the result of my tag cloud application:-
  
This seems good but not too good to me so I changed one line from my code like this:-
//Create the SPAN tag with spefic font size so it looks like cloud
      sb.Append("<span style='font-size:" + size + "pt'>" + tag.Name + "("+ tag.Count +") </span>");

And here is the result, I get the count after every tag:-
Hopefully this will be useful for you , do share your comments on that. Happy Coding !!!