<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jsTagCloud: 3D Tag Cloud using jsTagCloud jQuery plugin</title>
<script>
google.load("jquery", "1");
google.setOnLoadCallback(function() {
jQuery("#cloud").tagcloud({
'baseurl' : 'https://www.viralpatel.net/tag/',
'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>
</head>
<body>
<canvas id="cloud" width='256' height='256'>
Sorry! - Browser does not support Graphics Canvas
</canvas>
<br/>
<a href="http://slackers.se/2009/jstagcloud-js-canvas-3d-tag-cloud">Back to viralpatel.net</a>
</body>
</html>
Code language: JavaScript (javascript)Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…
Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…
Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…
1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…
GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…
1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…
View Comments
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);