WordCloud jQuery Plugin

Recently, I needed to create a tag cloud using JavaScript and I really liked the simplicity of Adam Groves’s Simple Tag Cloud Plugin for JQuery. The problem with this approach is that I did not have a list of tags with numbers for rel (defining how big a tag should be in the cloud). Most jQuery tag cloud plugins out there expect you to already have a generated list of tags with a numerical representation of their importance, and the jQuery code uses these numbers to style the tags with colors and sizes. My code, however, only had a list of tags, where many tags would repeat.

So, first, I had to look at all the words and calculate their importance based on repetition in the list. Then, I had to update the list by removing duplicates and updating each tag with a number representing the reoccurrence of the tag in the list. Finally, I could run through most of the original tagcloud code (with a little cleanup) and update the size and colors accordingly. Check out the demo or download from GitHub. There is also a real example in this Online Instagram Viewer (look at the tag cloud after making a search).

While we are on the subject, html5snippets has a pretty cool design example for making CSS3 Tags and if you want to get really fancy, this d3 tag cloud example is pretty awesome. It actually makes me think of wordle and wordle in PHP.