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

Advertisements




Flash Killer – Raphaël – JavaScript Library

7 07 2009

Raphaël LogoI have been having too much fun with the Raphaël Vector JavaScript Library.  Previously I have posted about Processing and ProcessingJS and I think they both are great for data visualization and art.  I have been a bit hesitant to use them for more standard web applications.  The original Processing Language is Java based, so it must load an applet.  The Processing JS has limiations on Internet Explorer (really Microsoft’s gap).  Similar arguments hold true for Flash and Silverlight technologies that require downloads, plug-ins, and load times.  Raphaël has no such limitations… no plugins, works on all browsers and to top it off it is quick.

Raphaël Demos

It is worthwhile to visit the Raphaël Project Home Page to understand what it’s creator Dmitry Baranovskiy has given the world in a 120kb package.  There is basic image movement, manipulation, lots of animation and more.  For simple projects it can really take the place of tools like Flash.  One of the more sophisticated examples I came across was Space Invaders.

There are some other options out there, and it may be worthwhile to check out how they compare.  A good starting list is at http://sixrevisions.com/javascript/10-impressive-javascript-animation-frameworks/

Now I am off to work on my Raphaël Tag Cloud.

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