Have you ever noticed that tag clouds and word clouds come in many shapes, but they hardly ever look like actual clouds? This fact was bugging me, so I decided to code jQCloud, an open-source jQuery plugin that draws neat cloud-shaped word clouds.

click the image to see a live demo

It is powered by an algorithm somehow reminiscent of Wordle, but producing pure HTML word clouds, that can be easily styled through CSS.

Using jQCloud is quite simple. First, make sure to import jQuery and the most recent version of the plugin’s JavaScript and CSS code, that you can find here.

Once you have done that, the first step is creating a container element in your HTML, explicitly specifying its dimensions and position (like relative, absolute, or really anything different from static):

<div id="wordcloud" style="width: 550px; height: 350px; position: relative;"></div>

Then, simply create an array of words, specifying for each of them a text, a weight (its relative “importance” in the cloud) and, optionally, a URL. Finally, call the jQCloud method on the container element to release the magic:

var word_list = [
   {text: "Lorem", weight: 15},
   {text: "Ipsum", weight: 9, link: "http://jquery.com/"},
   {text: "Dolor", weight: 6},
   {text: "Sit", weight: 7},
   {text: "Amet", weight: 5}
   // ...other words
];
$(document).ready(function() {
   $("#wordcloud").jQCloud(word_list);
});

You can style the cloud at will with CSS: just remember that the container element will be given a class of jqcloud, while each word will belong to one of ten classes of relative importance, from w1 to w10. Anyway, the best approach is probably to edit the default jqcloud.css file provided in the package.

Also, remember that jQCloud has a GitHub repository, where you can read the docs, find examples and fork the code.