jQCloud, a jQuery plugin to build neat word clouds (that actually look like clouds)

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.

jQCloud

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.

  • Ravindra Verma

    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
    });

    • http://www.lucaongaro.eu/ Luca Ongaro

      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

      • Ian Warburton

        There can’t be too many websites that can accept words spilling out of the area. Is there a fix for this yet?

  • http://donbryn.ipage.com buddhabackpacker

    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.

    • http://www.lucaongaro.eu/ Luca Ongaro

      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
      ];

  • http://nitehood.in Nithin Emmanuel

    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.

    • http://www.lucaongaro.eu/ Luca Ongaro

      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.

    • http://www.lucaongaro.eu/ Luca Ongaro

      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 :)

  • Dhinesh Kumar

    Hi,
    Thanks for this plugin, Is there any way to convert the JQCloud’s output div(html tags) to SVG?

    • http://www.lucaongaro.eu/ Luca Ongaro

      Hi Dhinesh,
      this possibility is not currently implemented in the plugin.

      • Dhinesh Kumar

        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: 10 Awesome jQuery Tag Cloud Plugins | Websanova()

  • Pingback: jQuery Cloud - Plugins and Tutorials | jQuery4u()

  • Ding

    Hi I wanna ask, how to show cloud text in zend framework, i try this code
    var word_list = [
    {text: "Lorem", weight: 13, link: "https://github.com/DukeLeNoir/jQCloud"},
    {text: "Ipsum", weight: 10.5, html: {title: "My Title", "class": "custom-class"}, link: {href: "http://jquery.com/", target: "_blank"}},
    {text: "Dolor", weight: 9.4},
    {text: "Sit", weight: 8}
    ];
    $(document).ready(function(){
    $(“#myCanvas”).JQCloud(word);
    });

    but that can’t show;
    can u tell me how to show jqcloud on MVC zend framework?
    i need ur help, thanks before

  • http://www.tobias-olbrich.de Hochzeitsfotograf

    Realy a nead Tag Cloud!!!

  • Hristo

    How do I add an additional word to an already rendered cloud?

  • Eric So

    Is there a way to to set the IDs of the tag cloud items manually? Instead of a direct link, I need to set click handlers for my tag cloud items.

    Love the plugin!

  • Cahones Gibson

    Hey there,

    Your jquery cloud rules. I was wondering if I can have permission to use it in a website I am developing?

    • http://www.lucaongaro.eu/ Luca Ongaro

      Sure you can ;) It is open sourced with MIT License

  • http://twitter.com/TangHoongCom Tang Hoong

    Hi, Luca you are awesome, i will use it as facebook apps =)

  • Patrick Kwinten

    I cannot include a link that contains a question mark e.g. http://www-03.ibm.com/press/us/en/pressrelease/40768.wss?CE=ISM0008

  • saravanan

    Hi all, i’m new to jquery. Jqcloud takes 4s to load in my html page (IE8). Hit test is taking more time in ie8. Is there anything going wrong?.

  • Darlan Dieterich

    How add variable with JSON objects? EX: word_list = [myVarOfJSON]“

  • Jonathan Solis

    If the word_list is the same for several or all pages of a website, is there anyway you could just include it within the js file, instead of having to call it from the HTML file each time? I’d like to make a word cloud that’s the same on every page of my blog, but I don’t want to have to go through and change every html page everytime I want to add a tag or change a weight. Thanks for any help!