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 !!!