Wordle Style Word Cloud or Tag Cloud Component For Silverlight

Example Word Cloud

LATEST VERSION AND DOCUMENTATION AVAILABLE HERE

I’ve been looking for a component that could show Wordle style word clouds.  The only Silverlight component I could find was Infragistics xamTagCloud, but it really didn’t produce the output I was looking for.  What I wanted was to be able to put lower importance words within the spaces left around larger entries.

Example Subtle Word Coloring

Having looked around the web I couldn’t find a component to buy or borrow so I decided to write my own.

I came across this post on Stack Overflow that had a response from the author of Wordle (Jonathan Feinberg), giving some tips on how Wordle works.  I used that and the extra reference Jonathan provided to build my component.

The key to word layout is to use a spiral (or another progressive positioning equation) to try to position words, every new word needs to be checked against the previously placed items to ensure that there is no overlap.

As collision is the expensvie part of the algorithm Jonathan suggests using a variety of techniques around collision rectangles and space partitioning to do the item testing; I felt this wasn’t necessary for my needs so I actually test the overlapping pixels to see if there is a hit.  This seems to give good enough performance, and if I wanted to improve it I would advocate making a second collision map at a lower resolution (1/8 scale) that would significantly cut down on the processing – but again, wasn’t necessary for me.

If you want to use something to layout instead of my spiral, you need to replace the GetSpiralPoint function with something that will return a progressive space based on an increaseing angle measured in radians.

The component also supports word hit testing and selection as well as coloring words based on a value as well as sizing them.

You can download the full source code for the component and the test project which will allow you to play with the parameters from the link at the top of this post.