Introduction:
A tag cloud is a visual depiction of user-generated tags used typically to describe the content of web sites, which is basically a feature of web 2.0 sites. Tags are usually single words and are typically listed alphabetically, and the importance of a tag is shown with font size or color. Thus both finding a tag by alphabet and by popularity is possible. The tags are usually hyperlinks that lead to a collection of items that are associated with a tag.
A tag cloud is a set of related tags with corresponding weights. Typical tag clouds have between 30 and 150 tags. The weights are represented using font sizes or other visual clues.
Types of Tag Cloud:
There are three types of tag cloud representation in WEB 2.0 as described below:
1) In the first type, size represents the number of times that tag has been applied to a single item. This approach is being used to display metadata about an item.
2) In the second type, size represents the number of items to which a tag has been applied,
This represents the popularity of a particular tag.
3) In the third type, tags are used as categorization method for content items. Tags are represented in a cloud where larger tags represent the quantity of content items in that category.
In this document, second type tag cloud is being created, where tag size is the token for the popularity of a particular tag. Tag’s size shows that how many times that particular tag is being used for tagging.
Tag Cloud Implementation:
In this approach, Tags information is stored in Tag.xml file which will provide necessary data to create tag cloud .This information can be stored in database or file system as per requirement.
Tags.xml is used to store following information:-
Tag-Id Attribute depicts uniqueness of the tag, so that no repetitive tags should be displayed in the user control.
Tag-Count Attribute defines the size of the tag that will be displayed in the user control. This count defines the uses of that particular tag. Every time an existing tag is used for tagging, Count increases by one.
The tag size is shown using a simple logic. What the user controls does is that it displays top 100 most popular tags. The tags in the xml file are sorted in descending order as per their count and then the top 100 are picked. The size of those top 100 tags is then defined by the formula:
(Tag count/max. count) x 30 pixel
Thus the most popular tag will be having the size of 30 pixel and later tags will have size with respect to most popular tag.
The below shown xml file displays all the necessary information to create a tag cloud.
Tags.xml
<tags>
<tag id="1" count="34">india</tag>
<tag id="2" count="33">chandigarh</tag>
<tag id="3" count="33">symonds</tag>
<tag id="4" count="34">adobe</tag>
<tag id="5" count="71">infosys</tag>
<tag id="6" count="36">microsoft</tag>
<tag id="7" count="156">Amir Khan</tag>
<tag id="8" count="38">tata motors</tag>
<tag id="9" count="39">bse</tag>
<tag id="12" count="40">suzene</tag>
<tag id="13" count="39">bhatinda</tag>
<tag id="14" count="23">ABB</tag>
<tag id="15" count="50">BHEL</tag>
<tag id="16" count="11">Reliance natural</tag>
<tag id="17" count="23">Asia electronics</tag>
<tag id="18" count="56">jaypee hydro</tag>
<tag id="19" count="30">bank of india</tag>
<tag id="20" count="58">HDFC</tag>
<tag id="21" count="10">Asp.Net</tag>
<tag id="22" count="78">Atlanta</tag>
<tag id="23" count="20">tiger</tag>
<tag id="25" count="47">EMEA</tag>
<tag id="26" count="50">wedding</tag>
<tag id="27" count="11">ONGC</tag>
</tags>
Create a New Visual studio C# project name Forum3.UserControls.In this project directory ,create a New folder name xml and place tags.xml file there, now a tag cloud can be created as a User Control.
By Using C# Code:
Create a User Control name UCTagCloud in Visual studio 2005.
It consists two files:-
• UCTagCloud.ascx
• UCTagCloud.ascx.cs
Now Copy the following code in UCTagCloud.ascx
<%@ Control Language="C#" AutoEventWireup="true" Inherits="Forum3.UserControls.UCTagCloud, Forum3.UserControls, Version=1.0.0.0, Culture=neutral, PublicKeyToken=18c318ff50f694f2" %>
<table id="TABLE1" runat="server" style="width: 100%">
<tr>
<td style="width: 100%">
</td>
</tr>
</table>
And copy the following code in UCTagCloud.ascx.cs.
public partial class UCTagCloud : System.Web.UI.UserControl
{
DataSet ds;
protected void Page_Load(object sender, EventArgs e)
{
int mincount;
ds = new DataSet();
//Get Tags.xml Data into Dataset
ds.ReadXml(Server.MapPath("./xml/Tags.xml"));
//Sort the tags data on Its Count
ds.Tables["Tag"].DefaultView.Sort = "count desc";
DataTable dt = ds.Tables["Tag"].DefaultView.ToTable();
//Get Row count of Table
int rowCount = dt.Rows.Count;
//Get Max value of count in existing Data
int maxcount = Convert.ToInt32(dt.Rows[0]["count"].ToString());
if (rowCount > 100)
{
//If More then 100 tags are available
//Get the Value of 100 th Tag as Minimum value of Count from sorted data
mincount = Convert.ToInt32(dt.Rows[100]["count"].ToString());
}
else
{
//If less then 100 tags are available
//Get the Value of last Tag as Minimum value of Count from sorted data
mincount = Convert.ToInt32(dt.Rows[rowCount-1]["count"].ToString());
}
//Select tags data from data table which have count value more or equal then minimum count to display in tag cloud
DataRow[] drc = dt.Select("count>=" + mincount, "tag_Text");
dt = ds.Tables["Tag"].DefaultView.ToTable();
//For each tag to diplay
foreach (DataRow dr in drc)
{
HtmlAnchor a = new HtmlAnchor();
//Assign URL as a hyperlink to each tag
//User will be traversed to this link when click on particular tag
a.HRef = "http://********:999/search.aspx?q=" + dr["tag_Text"].ToString();// xnod.InnerText;
//Assign inner text to Display as a Tag
a.InnerText = dr["tag_Text"].ToString();
//Assign Text to Display as a Tag
a.Title = dr["tag_Text"].ToString();
//Calculate size(weightage) of each tag based on its count and maximum count value
double normalWeight = (Convert.ToDouble(dr["count"].ToString()) / maxcount) * 30;
//Assign Font size to Each Tag according to its weightage
a.Style.Add(HtmlTextWriterStyle.FontSize, normalWeight.ToString());
//Add tags in a Htmltable to display
this.TABLE1.Rows[0].Cells[0].Controls.Add(a);
this.TABLE1.Rows[0].Cells[0].Controls.Add(new LiteralControl(" "));
}
}
}
}
Results will be displayed as in picture
Please note that the size of some tags is too small (the tag is not popular), there is possibility that it will be difficult to read. To rectify this we need to implement the “tooltip” on all the tags as shown in the picture above.
However it depends upon the developer choice whether he/she wants to implement this functionality or not.
A tag cloud is a visual depiction of user-generated tags used typically to describe the content of web sites, which is basically a feature of web 2.0 sites. Tags are usually single words and are typically listed alphabetically, and the importance of a tag is shown with font size or color. Thus both finding a tag by alphabet and by popularity is possible. The tags are usually hyperlinks that lead to a collection of items that are associated with a tag.
A tag cloud is a set of related tags with corresponding weights. Typical tag clouds have between 30 and 150 tags. The weights are represented using font sizes or other visual clues.
Types of Tag Cloud:
There are three types of tag cloud representation in WEB 2.0 as described below:
1) In the first type, size represents the number of times that tag has been applied to a single item. This approach is being used to display metadata about an item.
2) In the second type, size represents the number of items to which a tag has been applied,
This represents the popularity of a particular tag.
3) In the third type, tags are used as categorization method for content items. Tags are represented in a cloud where larger tags represent the quantity of content items in that category.
In this document, second type tag cloud is being created, where tag size is the token for the popularity of a particular tag. Tag’s size shows that how many times that particular tag is being used for tagging.
Tag Cloud Implementation:
In this approach, Tags information is stored in Tag.xml file which will provide necessary data to create tag cloud .This information can be stored in database or file system as per requirement.
Tags.xml is used to store following information:-
Tag-Id Attribute depicts uniqueness of the tag, so that no repetitive tags should be displayed in the user control.
Tag-Count Attribute defines the size of the tag that will be displayed in the user control. This count defines the uses of that particular tag. Every time an existing tag is used for tagging, Count increases by one.
The tag size is shown using a simple logic. What the user controls does is that it displays top 100 most popular tags. The tags in the xml file are sorted in descending order as per their count and then the top 100 are picked. The size of those top 100 tags is then defined by the formula:
(Tag count/max. count) x 30 pixel
Thus the most popular tag will be having the size of 30 pixel and later tags will have size with respect to most popular tag.
The below shown xml file displays all the necessary information to create a tag cloud.
Tags.xml
<tags>
<tag id="1" count="34">india</tag>
<tag id="2" count="33">chandigarh</tag>
<tag id="3" count="33">symonds</tag>
<tag id="4" count="34">adobe</tag>
<tag id="5" count="71">infosys</tag>
<tag id="6" count="36">microsoft</tag>
<tag id="7" count="156">Amir Khan</tag>
<tag id="8" count="38">tata motors</tag>
<tag id="9" count="39">bse</tag>
<tag id="12" count="40">suzene</tag>
<tag id="13" count="39">bhatinda</tag>
<tag id="14" count="23">ABB</tag>
<tag id="15" count="50">BHEL</tag>
<tag id="16" count="11">Reliance natural</tag>
<tag id="17" count="23">Asia electronics</tag>
<tag id="18" count="56">jaypee hydro</tag>
<tag id="19" count="30">bank of india</tag>
<tag id="20" count="58">HDFC</tag>
<tag id="21" count="10">Asp.Net</tag>
<tag id="22" count="78">Atlanta</tag>
<tag id="23" count="20">tiger</tag>
<tag id="25" count="47">EMEA</tag>
<tag id="26" count="50">wedding</tag>
<tag id="27" count="11">ONGC</tag>
</tags>
Create a New Visual studio C# project name Forum3.UserControls.In this project directory ,create a New folder name xml and place tags.xml file there, now a tag cloud can be created as a User Control.
By Using C# Code:
Create a User Control name UCTagCloud in Visual studio 2005.
It consists two files:-
• UCTagCloud.ascx
• UCTagCloud.ascx.cs
Now Copy the following code in UCTagCloud.ascx
<%@ Control Language="C#" AutoEventWireup="true" Inherits="Forum3.UserControls.UCTagCloud, Forum3.UserControls, Version=1.0.0.0, Culture=neutral, PublicKeyToken=18c318ff50f694f2" %>
<table id="TABLE1" runat="server" style="width: 100%">
<tr>
<td style="width: 100%">
</td>
</tr>
</table>
And copy the following code in UCTagCloud.ascx.cs.
public partial class UCTagCloud : System.Web.UI.UserControl
{
DataSet ds;
protected void Page_Load(object sender, EventArgs e)
{
int mincount;
ds = new DataSet();
//Get Tags.xml Data into Dataset
ds.ReadXml(Server.MapPath("./xml/Tags.xml"));
//Sort the tags data on Its Count
ds.Tables["Tag"].DefaultView.Sort = "count desc";
DataTable dt = ds.Tables["Tag"].DefaultView.ToTable();
//Get Row count of Table
int rowCount = dt.Rows.Count;
//Get Max value of count in existing Data
int maxcount = Convert.ToInt32(dt.Rows[0]["count"].ToString());
if (rowCount > 100)
{
//If More then 100 tags are available
//Get the Value of 100 th Tag as Minimum value of Count from sorted data
mincount = Convert.ToInt32(dt.Rows[100]["count"].ToString());
}
else
{
//If less then 100 tags are available
//Get the Value of last Tag as Minimum value of Count from sorted data
mincount = Convert.ToInt32(dt.Rows[rowCount-1]["count"].ToString());
}
//Select tags data from data table which have count value more or equal then minimum count to display in tag cloud
DataRow[] drc = dt.Select("count>=" + mincount, "tag_Text");
dt = ds.Tables["Tag"].DefaultView.ToTable();
//For each tag to diplay
foreach (DataRow dr in drc)
{
HtmlAnchor a = new HtmlAnchor();
//Assign URL as a hyperlink to each tag
//User will be traversed to this link when click on particular tag
a.HRef = "http://********:999/search.aspx?q=" + dr["tag_Text"].ToString();// xnod.InnerText;
//Assign inner text to Display as a Tag
a.InnerText = dr["tag_Text"].ToString();
//Assign Text to Display as a Tag
a.Title = dr["tag_Text"].ToString();
//Calculate size(weightage) of each tag based on its count and maximum count value
double normalWeight = (Convert.ToDouble(dr["count"].ToString()) / maxcount) * 30;
//Assign Font size to Each Tag according to its weightage
a.Style.Add(HtmlTextWriterStyle.FontSize, normalWeight.ToString());
//Add tags in a Htmltable to display
this.TABLE1.Rows[0].Cells[0].Controls.Add(a);
this.TABLE1.Rows[0].Cells[0].Controls.Add(new LiteralControl(" "));
}
}
}
}
Please note that the size of some tags is too small (the tag is not popular), there is possibility that it will be difficult to read. To rectify this we need to implement the “tooltip” on all the tags as shown in the picture above.
However it depends upon the developer choice whether he/she wants to implement this functionality or not.
