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, url: "http://jquery.com/", title: "jQuery Rocks!"},
{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.
Hi,
I am facing a problem with this control.
I am showing 50 words in wordcloud. If I provide the size of the div lower (e.g. 350*250) than few words are spilling out the div. I set the overflow property of the div to “auto” to show the scroll bars and then also it is spilling. Actually the left or top position of the word is negative (e.g. -50), therefore it is spilling over the boundary.
Is there any static dimensions (width and height) prescribed, below than dimension it will spilling over the boundaries?
I am using the version 0.2.4
I am calling the method as:
divRow.jQCloud(word_list, {
width: 350,
height: 250
});
Ravindra,
the readme is very unclear on that. As a matter of fact, the width and height configuration parameters do not affect the overall dimension of the word cloud, but only its aspect ratio. They would be better called xAxisLength and yAxisLength instead of width and height. Currently, if you don’t want words to spill out of the boundaries, you have either to reduce the font sizes or to enlarge the box so words can fit into its boundaries. I am considering improvements to jQCloud on this particular issue (and I would certainly accept pull requests that address this issue), but unfortunately in the meantime that’s the only way to go.
I hope this helps you. Regards,
Luca
Thanks for such a cool script. I am using jqcloud on the index page in the testing website above. However I get an error in IE8: ‘word_array[..] is not an object in jqcloud-0.4.2.js line 65 char 9. It works great in firefox and safari but I can’t seem to track down why it’s not working in IE8. I’ve tried loading your demo page on github directly in IE8 and it works.
I would be really appreciative of any ideas to track down the error.
buddhabackpacker,
first of all thanks for your interest in jQCloud! Looking at your code it seems that the problem is due to a trailing comma in the word list that confuses IE (see your code commented below). Try removing it and see if it works :)
var word_list = [
{text: 'Weddings', weight: 15},
{text: 'Community Events', weight: 9},
{text: 'Theme Parties', weight: 6},
{text: 'Private Clubs', weight: 7},
{text: 'Festivals', weight: 5},
{text: 'Restaurants', weight: 11},
{text: 'Society Galas', weight: 5},
{text: 'Dancing', weight: 3},
{text: 'Ear Candy', weight: 12}, // remove this trailing comma
// ...other words
];
Hi,
Thanks a lot for this plugin. I was searching everywhere for something like this. I have a little problem on this. Is there any way i can bring words to the edges to. ie align words from the center, but not in circular manner. it should occupy the borders also, as rectangle or square shape.
Hi Nithin,
while not implemented in jQCloud yet, arranging words in a rectangle is perfectly feasible. jQCloud moves each word along a spiral until it finds a suitable place, so all it’s needed is to make the spiral a rectangular one rather than an elliptic one.
I’d like to implement the possibility to choose between elliptic and a rectangular shape soon, but I probably won’t make it before a week. If you feel like to code it yourself, I can give you some guidelines and I’ll be happy to merge a good pull request into the main distribution.
Nithin,
I just pushed on GitHub a new version (v0.2.7) adding the ‘shape’ option. If you set it to ‘rectangular’ you get a rectangular-shaped cloud. Let me know your opinion :)
Hi,
Thanks for this plugin, Is there any way to convert the JQCloud’s output div(html tags) to SVG?
Hi Dhinesh,
this possibility is not currently implemented in the plugin.
Finally , I have convert the jqcloud div to svg element.
var UNDEFINED,SVG_NS = ‘http://www.w3.org/2000/svg’;
/**
* Returns true if the object is not null or undefined.
* @param {Object} obj
*/
function defined(obj) {
return obj !== UNDEFINED && obj !== null;
}
/**
* Set or get an attribute or an object of attributes. Can’t use jQuery attr because
* it attempts to set expando properties on the SVG element, which is not allowed.
*
* @param {Object} el The DOM element to receive the attribute(s)
* @param {String|Object} prop The property or an abject of key-value pairs
* @param {String} value The value if single property is set
*/
function attribute(el, prop, value)
{
var result=null;
if (typeof(prop)===’string’) {
if (defined(value)) {
el.setAttribute(prop, value);
}
else if (el && el.getAttribute) {
result = el.getAttribute(prop);
}
} else if (defined(prop) && typeof(prop)===’object’) { //key/value pairs
var key;
for (key in prop) {
el.setAttribute(key, prop[key]);
}
}
return result;
}
/**
* get all basic styles (‘font-family’,'font-size’,'color’) from a DOM element
*
* @param {Object} el The DOM element from get the styles
*
*/
function getAllStyles(el)
{
var styles =['font-family','font-size','color'];
var svgStyles =["font-family","font-size","fill"];
var len = styles.length, style=”;
for (var i = 0; i < len; i++)
{
style=style+svgStyles[i]+':'+ jQuery(el).css(styles[i])+';';
}
return style;
}
/**
* Parse a Jqcloud div into SVG element
*
* @param {String} div_id the id of the Jqcloud div
*/
function jqCloudToSVG(div_id) {
var svg=document.createElementNS(SVG_NS,"svg");
attribute(svg,{xmlns:SVG_NS,version:'1.1',width:jQuery('#'+div_id).width(),height:jQuery('#'+div_id).height()});
jQuery('#'+div_id+' span').each(function(index, span){
var word=jQuery(span).text(),
style=getAllStyles(span),
svgText =document.createElementNS(SVG_NS,'text'),
tspan= document.createElementNS(SVG_NS,'tspan');
attribute(svgText,'x',parseInt(jQuery(span).css('left'),10));
attribute(svgText,'y',parseInt(jQuery(span).css('top'),10));
attribute(svgText,'style',style);
tspan.appendChild(document.createTextNode(word));
var lineHeight=(parseInt(jQuery(span).css('font-size'),10));
attribute(tspan,'dy',lineHeight);
svgText.appendChild(tspan);
svg.appendChild(svgText);
});
var svgJQcloud=document.createElement('div');
jQuery(svgJQcloud).append(svg);
return svgJQcloud;
}
I didn't cover all features.
Pingback: jQuery Cloud - Plugins and Tutorials | jQuery4u