Tag cloud. Key words visualization. Local weather conditions at FeaturePics.com

A quote from the "Second Generation Tag Clouds" article at http://www.joelamantia.com/blog/archives/ideas/second_generation_tag_clouds.html:

"In the future, expect to see specialized tag cloud implementations emerge for a tremendous variety of semantic fields and focuses: celebrities, cars, properties or homes for sale, hotels and travel destinations, products, sports teams, media of all types, political campaigns, financial markets, brands, etc."

Oops, we still have no our "first generation" tag clouds! :)

Here we go - Local weather conditions at featurepics.com using "first generation" tag cloud.:):). See above.

It is still "winter" and "cold", a lot of clouds and rain, but summer weather is coming!

Our tag cloud (or weighted list in visual design) is a visual depiction of keywords, image name, and image caption used to describe images in the Weather category.

• We used a font size to represent the number of images to which a keyword has been applied.
• We have colored our tags a little bit - we are a photography site and like to play with colors.
• We took seriously the advice from http://24ways.org/2006/marking-up-a-tag-cloud:
  "As del.icio.us tells us, a tag cloud is a list of tags where the size that they are rendered at contains extra information. However, by hiding the extra context purely within the CSS or the HTML tags used, you are denying that context to some users. The basic assumption being made is that all users will be able to see the difference between font sizes, and this is demonstrably false."
  We just added a title for <a> tag.

Now our tag cloud css is as indicated below:

.tag-cloud {DISPLAY: inline;height:50px;text-align:center;margin3px;float:left;}.tag-cloud A.tag0 {FONT-WEIGHT: 200; FONT-SIZE:9px; COLOR: #cccccc;}.tag-cloud A.tag1 {FONT-WEIGHT: 200; FONT-SIZE: 10px; COLOR: #c3c4c4;}.tag-cloud A.tag2 {FONT-WEIGHT: 300; FONT-SIZE: 11px; COLOR: #b9bdbd;}.tag-cloud A.tag3 {FONT-WEIGHT: 300; FONT-SIZE: 12px; COLOR: #b0b5b5;}.tag-cloud A.tag4 {FONT-WEIGHT: 300; FONT-SIZE: 14px;COLOR: #b0b5b5;}.tag-cloud A.tag5 {FONT-WEIGHT: 400; FONT-SIZE: 16px; COLOR: #9da6a6;}.tag-cloud A.tag6 {FONT-WEIGHT: 400; FONT-SIZE: 18px; COLOR: #939f9f;}.tag-cloud A.tag7 {FONT-WEIGHT: 400; FONT-SIZE: 20px; COLOR: #8a9797;}.tag-cloud A.tag8 {FONT-WEIGHT: 500; FONT-SIZE: 24px; COLOR: #809090;}.tag-cloud A.tag9 {FONT-WEIGHT: 500; FONT-SIZE: 28px; COLOR: #778888;}.tag-cloud A.tag10{FONT-WEIGHT: 700; FONT-SIZE: 28px; COLOR: #778888;}

You can use the code (c#) below to calculate "blended" colors:

string [] graypalette = new string[10];int steps=10;System.Drawing.Color startGray=System.Drawing.Color.FromArgb(((System.Byte)(204)), ((System.Byte)(204)), ((System.Byte)(204)));System.Drawing.Color endGray=System.Drawing.Color.FromArgb(((System.Byte)(68)), ((System.Byte)(68)), ((System.Byte)(68)));int steps=10;...graypalette=BlendIt(startGray,endGray);...private string [] BlendIt(System.Drawing.Color start, System.Drawing.Color end) {string [] palette = new string[10];int r,g,b;int red = (end.R-start.R) / (steps-1);int green = (end.G-start.G) / (steps-1);int blue = (end.B-start.B) / (steps-1);for (int i = 0; i < steps; i++) {r = start.R + (red * i);g = start.G + (green * i);b = start.B + (blue * i);palette[i]="#"+ColorToHex(r)+ColorToHex(g)+ColorToHex(b);}return palette;}private string ColorToHex(int c){string s=Convert.ToString(c,16);if (s.Length<2)s="0"+s;return s;}