Raphaël TagCloud\WordCloud

7 07 2009

I have a couple of ideas where I could really use a slick tag cloud or word clould.  If you are not familar with tag cloud, the basic concept is to  display some of the most frequent words in your content, with the size of the word driven by how the frequency of the word occuring.  It sounds simple enough and there are actually quite a few solutions.

As I was starting my search I mainly came across examples that were text or html based.  They were  inline words that just had the font size adjusted.  Unfortunately, I was looking for something more along the lines of Wordle.net.  At Wordle the tag clouds are like art.  There are colors, different rotations, etc.

Wordle Example

I decided that if you can’t find it, build it.  This is what brought me to the Raphaël JavaScript Library.  This has the lightweight footprint, it is supported by all of the browsers and can create some great visualizations.

The most difficult part of putting this together was in figuring out how to layout the words so that they did not overlap.  I am sure there are some really smart people that could come up with an algorithm that would accurately place the words, but I have to admit I resorted to trial and error.  Basically my code places a word and then sprials around the central coordinates to find free space to place the next word.

Raphaël Tag Cloud

So as you can see by my progress to date, there is still some work to get to great look of Wordle.  I think it is possible, with a little more work.  What doesn’t show in the screenshot is the fact that Raphaël has enabled an interactive tag cloud (the large blue Joker is because the cursor is over the text).  The combination of a great visual and interactivity should get me to my goal of a slick tag cloud.

Add to DeliciousAdd to DiggAdd to FaceBookAdd to Google BookmarkAdd to MySpaceAdd to NewsvineAdd to RedditAdd to StumbleUponAdd to TechnoratiAdd to Twitter



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: