Tagging 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.
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.
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.
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.
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);
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?
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.
I’m running FF 3.5 and this does not work for me..
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.
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.
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);