Simple Tag Cloud In JavaScript - jQuery Tagcloud.js

Tagcloud.js is a small and simple JavaScript library for jQuery that generates a customizable tag cloud (word cloud, phrase cloud) from a group of text with different priorities, gradient colors and font sizes.

How to use it:

1. Insert your tag (word, phrase) links to the tagcloud container and specify the priority using the rel attribute as these:

<div id="tagcloud">
  <a href="#" rel='4'><span>C++<sup>4</sup></span></a>
  <a href="#" rel='2'><span>Java<sup>2</sup></span></a>
  <a href="#" rel='5'><span>Python<sup>5</sup></span></a>
  <a href="#" rel='5'><span>javascript<sup>5</sup></span></a>
  <a href="#" rel='4'><span>react<sup>4</sup></span></a>
  ...
</div>

3. Generate a default tag cloud on the webpage.

$(function () {
  $('#tagcloud a').tagcloud();
});

4. Change the default min/max font sizes.

$(function () {
  $('#tagcloud a').tagcloud({
    size: {
      start: 20,
      end: 30,
      unit: "px"
    },
  });
});

5. Change the default range of position-dependent colors for the color gradient.

$(function () {
  $('#tagcloud a').tagcloud({
    color: {
      start: '#1c5866',
      end: '#661c49'
    }
  });
});

---

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