WordCloud for Silverlight

Download the latest version of WordCloud

My Silverlight WordCloud control enables the production of Wordle style word clouds in your Silverlight application. The component supports individual word sizing, colouring, angle and opacity.

The idea of a word cloud is to represent some numerical data that can be linked to a word. As a developer you supply a list of entries, each of which has a word or phrase and a series of values that are used to determine the size, angle, colour and intensity of a word. You can relate three numerical properties to the size, angle and intensity – you specify the colour directly or the system uses a default colour if no specific one is listed.

The component is inserted into the XAML like this:

<WordCloudControl:WordCloud Margin="3"
   x:Name="Cloud"
   Grid.Row="1"
   DefaultColor="DarkBlue"
   FromAlpha="0.3"
   ToAlpha="0.9"
   AngleCenterValue="15"
   MaximumLowestAngleValue="0"
   MinimumLargestAngleValue="10"
   />

The you create a series of entries however you like and pass them to the Entries property of the control:

var l = new ObservableCollection<WordCloud.WordCloudEntry>
{
    new WordCloud.WordCloudEntry() { Word = "Hello", SizeValue = 50, ColorValue=20,Angle = 11},
    new WordCloud.WordCloudEntry() { Word = "World", SizeValue = 45, ColorValue=32,Angle = 18 },
    new WordCloud.WordCloudEntry() { Word = "This is", SizeValue = 42, ColorValue=32,Angle = 14 },
    new WordCloud.WordCloudEntry() { Word = "Mike Talbot's", SizeValue = 47, ColorValue=32,Angle = 21 },
    new WordCloud.WordCloudEntry() { Word = "New", SizeValue = 35, ColorValue=32,Angle = 20 },
    new WordCloud.WordCloudEntry() { Word = "Word Cloud", SizeValue = 65, ColorValue=32,Angle = 15 },
    new WordCloud.WordCloudEntry() { Word = "Component", SizeValue = 35, ColorValue=32,Angle = 17 },
    new WordCloud.WordCloudEntry() { Word = "http://whydoidoit.com", SizeValue = 28, ColorValue=19,Angle = 11 },
    new WordCloud.WordCloudEntry() { Word = "Use it", SizeValue = 16, ColorValue=19,Angle = 16 },
    new WordCloud.WordCloudEntry() { Word = "Free", SizeValue = 53, ColorValue=19,Angle = 16 },
    new WordCloud.WordCloudEntry() { Word = "Create", SizeValue = 23, ColorValue=19,Angle = 11 },
    new WordCloud.WordCloudEntry() { Word = "Wordle", SizeValue = 40, ColorValue=19,Angle = 14 },
    new WordCloud.WordCloudEntry() { Word = "Tag Clouds", SizeValue = 22, ColorValue=19,Angle = 12 },
    new WordCloud.WordCloudEntry() { Word = "www.alterian.com", SizeValue = 15, ColorValue=26,Angle = 18 }
};

Cloud.Entries = l;

Manipulating Words

The numerical values are all scaled differently depending on the property.

Size

For Size the smallest value will map to the minimum font size supplied in the MinFontSize property, the largest value will map to a size related to the size of the component as rendered by Slverlight, the minimum font size and the % of the display that the largest word should take, which is specified in LargestWidthSizeProportion.

Alpha

For Alpha Intensity the smallest value will map to the minimum opacity specified in FromAlpha and the largest value will map to the maximum opacity specified in ToAlpha.

Angle

Angle has two modes of operation. If AngleCenterValue is set to NaN then words are rotated so that the minimum value of Angle maps to straight up (rotate -90 degrees) and the maximum value of Angle maps to horizontal (0 degree rotation). If AngleCenterValue has a value then words beneath this value will be rotated anticlockwise is proportion to the maximum negative or positive range and words above the value will be rotated clockwise in proportion. You can basically think of this as the words acting like the needle of a gauge.

When AngleCenterValue is set then the range of the rotation works like this:

The range of the rotation is set based on the absolute maximum difference of Angle value from the center point. E.g. if AngleCenterValue is 0 and we have a maximum angle value of 15 and a minimum angle value of -20 then the range of the rotation is from -20 to +20. In other words a value of (+20) will point straight down and a value of (-20) will point straight up. In the example no word has a value of +20, so no word will point straight down. In this way the angle of rotation is always proportional to the value.

There is one more complexity about angles, you can specifiy a MaximumLowestAngleValue and a MinimumLargestAngleValue which lets you specify a minimum range. For example if you specified MaximumLowestAngleValue to be -10 and MinimumLargestAngleValue to be +10 then had words with values that ranged between -5 and +5 the range would still be set to -10 to +10 meaning words would never point more than -45 degrees or +45 degrees. This can be useful for visualizing data.

Properties

Property	Purpose	Default
AngleCenterValue	If not Double.NaN, this specifies the value that will be used for horizontally aligned words, values of Angle greater than this will be rotated clockwise, lower values anti-clockwise	NaN
DefaultColor	The colour to use if no specific word colour is specified	Black
FromAlpha	The minimum alpha value for the smallest size of ColorValue in the entry	0x40
LargestWidthSizeProportion	Specifies the maximum amount of the width of the display that the largest value should occupy	0.5
MaximumSmallestAngleValue	The maximum value to use as the bottom of the range	NaN
MaxWords	The maximum number of words to try and fit in the cloud	150
MinFontSize	The minimum point size of font to use for the smallest word (based on Size)	11
MinimumLargestAngleValue	The minimum value to use as the top of the range	NaN
SelectedColor	The brush to be used for selected words	White
SelectedItems	A list of integers for the indices of words that are selected
ToAlpha	The maximum alpha value for the largest size of ColorValue in the entry	0xEE

Finding An Item From a Point

You can use the GetEntry(Point pt) method to return an entry at a given location.

        private void Cloud_OnMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
Cloud.SelectedItems.Clear();
var entry = Cloud.GetEntry(e.GetPosition(Cloud));
if(entry != null)
Cloud.SelectedItems.Add(Cloud.Entries.IndexOf(entry));

}

Comments (3)
Trackbacks (3)

#1 by nimshory on July 4, 2012 - 8:27 am

This is great! I’m loving it.
It is worth mentioning that using code like the one below will provide only two distinct angle values which will result in each word being either aligned horizontal or vertical.

var words = new ObservableCollection();

for (int i = 0; i < 10; i++)
{
var val = (i * 2) + 30;
words.Add(new WordCloud.WordCloudEntry { SizeValue = val, ColorValue = val, Word = "word-" + i, Angle =(i % 2)});
}

Keep up the god job

Reply
#2 by nimshory on July 4, 2012 - 8:29 am

This is great! I’m loving it.
It is worth mentioning that using code like the one below will provide only two distinct angle values which will result in each word being either aligned horizontal or vertical.

var words = new ObservableCollection();

for (int i = 0; i < 10; i++)
{
var val = (i * 2) + 30;
words.Add(new WordCloud.WordCloudEntry { SizeValue = val, ColorValue = val, Word = "word-" + i, Angle =(i % 2)});
}

Keep up the god job!

Reply
- #3 by whydoidoit on July 4, 2012 - 12:47 pm
  
  Thanks – yes it provides an angle based on the min and max values of the angle
  
  Reply

Mike Talbot's Blog