Awesome Tag Cloud Plugin with jQuery and Html5 Canvas - awesomeCloud

awesomeCloud is a cool jQuery plugin that makes uses of Html5 canvas element to generate an awesome tag cloud in multiple shapes. Includes lots of options to set the color, size, font, scale, order, orientation for the tags. Licensed under the GPL v3.

See also:

• jQuery Plugin To Create 3D Sphere-style Tag Cloud - tagcloud
• jQuery Simple Clean Tag Cloud Plugin - tx3TagCloud
• Minimal jQuery Based 3D Ball Tag Cloud - cloudTag.js
• TagCanvas - HTML5 Tag Cloud with Jquery

Basic Usage:

1. Load the latest version of jQuery library and jQuery awesomeCloud plugin in the document.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="jquery.awesomeCloud.min.js"></script>

2. Wrap the words/tags in an HTML element with a data-weight attribute that reflects it's "weight".

<div id="demo"> 
<span data-weight="91"> Tag 1 </span>
<span data-weight="21"> Tag 2 </span> 
<span data-weight="41"> Tag 3 </span> 
<span data-weight="13"> Tag 4 </span> 
<span data-weight="78"> Tag 5 </span> 
...
</div>

3. Call the plugin on the parent element and set the options for the tag cloud.

<script>
$(document).ready(function(){
$("#demo").awesomeCloud({
"size" : {
"grid" : 16, // word spacing, smaller is more tightly packed
"factor" : 0, // font resize factor, 0 means automatic
"normalize" : false // reduces outliers for more attractive output
},
"color" : {
"background" : "rgba(255,255,255,0)", // background color, transparent by default
"start" : "#20f", // color of the smallest font, if options.color = "gradient""
"end" : "rgb(200,0,0)" // color of the largest font, if options.color = "gradient"
},
"options" : {
"color" : "random-dark", // random-light, random-dark, gradient
"rotationRatio" : 0.35, // 0 is all horizontal, 1 is all vertical
"printMultiplier" : 3, // set to 3 for nice printer output; higher numbers take longer
"sort" : "random" // highest, lowest or random
},
"font" : "'Times New Roman', Times, serif", //  the CSS font-family string
"shape" : "square" // circle, square, star or a theta function describing a shape
});
});
</script>

---

This awesome jQuery plugin is developed by indyarmy. For more Advanced Usages, please check the demo page or visit the official website.