Create 3D tag cloud using jsTagCloud jQuery plugin

3d-tagcloudTagging the content has increased the searchability of content in todays Web 2.0 world. Also similar content can be grouped together by assigning them same tags. Tag Cloud has became a good way of displaying the weighted tags in a manner easy to understand and search. You can find a lot of code written in all possible scripts to generate tag clouds. You may interested in Generating tag cloud with PHP and MySQL. While roaming around on internet, I found this really cool jQuery plugin jsTagCloud that generates 3D tag cloud!! The result is quite impressive and you can actually move the tag cloud using mouse pointer. It uses the canvas element to render a 3d cloud that can be rotated with the mouse. Following is the demo and code that I used to generate 3D tag cloud using jsTagCloud plugin.

Online Demo

Click here if you cannot view the demo.

Code to Generate 3D Tag Cloud

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jsTagCloud: 3D Tag Cloud using jsTagCloud jQuery plugin</title> <script src="//"></script> <script> google.load("jquery", "1"); google.setOnLoadCallback(function() { jQuery("#cloud").tagcloud({ 'baseurl' : '', 'background' : [255,255,255], 'textcolor' : [0,0,128], 'interval' : 50, 'data' : [ {'url':'AJAX', 'tag':'AJAX'}, {'url':'browsers', 'tag':'browsers'}, {'url':'chrome', 'tag':'chrome'}, {'url':'Compression', 'tag':'Compression'}, {'url':'CSS', 'tag':'CSS'}, {'url':'exception', 'tag':'exception'}, {'url':'file-upload', 'tag':'file-upload'}, {'url':'firebug', 'tag':'firebug'}, {'url':'firefox', 'tag':'firefox'}, {'url':'gmail', 'tag':'gmail'}, {'url':'google', 'tag':'google'}, {'url':'internet', 'tag':'internet'}, {'url':'J2EE', 'tag':'J2EE'}, {'url':'jar', 'tag':'jar'}, {'url':'Java', 'tag':'Java'}, {'url':'JavaScript', 'tag':'JavaScript'}, {'url':'framework', 'tag':'framework'}, {'url':'java', 'tag':'java'}, {'url':'javascript', 'tag':'javascript'}, {'url':'jboss', 'tag':'jboss'}, {'url':'linux', 'tag':'linux'}, {'url':'JQuery', 'tag':'JQuery'}, {'url':'maven', 'tag':'maven'}, {'url':'pdf', 'tag':'pdf'}, {'url':'performance', 'tag':'performance'}, {'url':'rss', 'tag':'rss'}, {'url':'php', 'tag':'php'}, {'url':'servlet', 'tag':'servlet'}, {'url':'struts', 'tag':'struts'}, {'url':'stanford', 'tag':'stanford'}, {'url':'tomcat', 'tag':'tomcat'}, {'url':'twitter', 'tag':'twitter'}, {'url':'Web2.0', 'tag':'Web2.0'}, {'url':'ubuntu', 'tag':'ubuntu'}, {'url':'wordpress', 'tag':'wordpress'}, {'url':'windows', 'tag':'windows'} ] }); }); </script> <script src="jquery.tagcloud.js"></script> </head> <body> <canvas id="cloud" width='256' height='256'> Sorry! - Browser does not support Graphics Canvas </canvas> <br/> <a href="">Back to</a> </body> </html>
Code language: JavaScript (javascript)
Feel free to copy the code and extend it for your use. Note that the demo will work only in browsers that supports Canvas element of HTML.
Get our Articles via Email. Enter your email address.

You may also like...


  1. Veera says:

    This is cool. I’ve seen such kinda 3D tag clouds in many blogs. But most of them were using Flash. But, it’s good to replicate the same in JS too.

    But, what about performance? Will there be any penalty?

  2. I dont think there seems to be any performance issue.. atleast till you have few tens of tags. The math behind the rotation remains the same in flash as well as js versions.
    only problem that I see in this implementation now is that it does not works with all browsers. Only works with HTML 5 enabled browsers.

  3. Daniel says:

    I’m running FF 3.5 and this does not work for me..

  4. Dss says:

    Looking at the source, it looks like you have the tagcloud.js file loading after the script that calls it in the header. That would likely explain why it doesn’t work.

  5. chengster says:

    There’s also a problem with the jquery.tagcloud.js file. node.width does not contain a value, but node.width.width does on line 118. I’m a jscript noob so apologies if I’ve used the wrong terminology.

  6. rejetto says:

    not working even on my firefox 3.6
    firebug reports this:
    An invalid or illegal string was specified” code: “12
    [Break on this error] this.strokeText(text, x, y);

Leave a Reply

Your email address will not be published. Required fields are marked *