jQCloud is a jQuery plugin that builds neat and pure HTML + CSS word clouds and tag clouds that are actually shaped like a cloud (otherwise, why would we call them ‘word clouds’?).
You can see a demo here
Installing jQCloud is extremely simple:
- Make sure to import the jQuery library in your project.
- Download the jQCloud files. Place jqcloud-0.1.6.js (or the minified version jqcloud-0.1.6.min.js) and jqcloud.css somewhere in your project and import both of them in your HTML code.
You can easily substitute jqcloud.css with a custom CSS stylesheet following the guidelines explained later.
Once you imported the .js and .css files, drawing a cloud is as simple as this:
<!DOCTYPE html>
<html>
<head>
<title>jQCloud Example</title>
<link rel="stylesheet" type="text/css" href="jqcloud.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="jqcloud-0.1.6.js"></script>
<script type="text/javascript">
/*!
* Create an array of objects to be passed to jQCloud, each representing a word in the cloud and specifying
* the following mandatory attributes:
*
* text: a string containing the word(s)
* weight: a number (integer or float) defining the relative importance of the word
* (such as the number of occurrencies, etc.). The range of values is arbitrary, as they will
* be linearly mapped to a discrete scale from 1 to 10.
*
* You can also specify the following optional attributes:
*
* url: a URL to which the word will be linked. It will be used as the href attribute of an HTML anchor.
* title: an HTML title for the <span> that will contain the word(s)
*/
var word_list = [
{text: "Lorem", weight: 15},
{text: "Ipsum", weight: 9, url: "http://jquery.com/", title: "jQuery Rocks!"},
{text: "Dolor", weight: 6},
{text: "Sit", weight: 7},
{text: "Amet", weight: 5}
// ...other words
];
$(document).ready(function() {
// Call jQCloud on a jQuery object passing the word list as the first argument. Chainability of methods is maintained.
$("#example").jQCloud(word_list);
});
</script>
</head>
<body>
<!-- You must explicitly specify the dimensions of the container element -->
<div id="example" style="width: 550px; height: 350px; position: relative;"></div>
</body>
</html>Since drawing the cloud is rather computationally intensive, cloud rendering isn’t instantaneous. If you want to make sure that some code executes after the cloud is rendered, you can pass to jQCloud a callback function:
$("#example").jQCloud(word_list, function(){
// This code executes after the cloud is fully rendered
});The word cloud produced by jQCloud is made of pure HTML, so you can style it using CSS. When you call $(“#example”).jQCloud(…), the containing element is given a CSS class of “jqcloud”, allowing for easy CSS targeting. The included CSS file jqcloud.css is intended as an example and as a base on which to develop your own custom style, defining dimensions and appearance of words in the cloud. When writing your custom CSS, just follow these guidelines:
- Always specify the dimensions of the container element (div.jqcloud in jqcloud.css).
- The CSS attribute ‘position’ of the container element must be explicitly declared and different from ‘static’.
- Specifying the style of the words (color, font, dimension, etc.) is super easy: words are wrapped in
<span>tags with ten levels of importance corresponding to the following classes (in descending order of importance): w10, w9, w8, w7, w6, w5, w4, w3, w2, w1.
Just have a look at the examples directory provided in the project or see a demo here.
If you happen to use jQCloud in your projects, you can make me know (just contact me on my website) and I can add a link to your website in a ‘gallery’ section, so that other people can take inspiration from it.
0.1.6 JavaScript-friendly URL encode ‘url’ option; Typecast ‘weight’ option to float (thanks to nudesign)
0.1.5 Apply CSS style to a “jqcloud” class, automatically added (previously an id was used. Again, thanks to seanahrens)
0.1.4 Fix bug with multiple clouds on the same page (kudos to seanahrens)
0.1.3 Added possibility to pass a callback function and to specify a custom HTML title attribute for each word in the cloud
0.1.0 → 0.1.2 I just started this tiny project, only minor improvements and optimization happened