Demo of the WordCloud jQuery Plugin
Check out the source to see how it works. Back to Article
WordCloud creates a tag cloud out of a list of words with colors and sizes.
WordCloud on GitHub: jquery.wordcloud.js
Minified Version (4kb): jquery.wordcloud.min.js
Real Online Example: ImageNab Instagram Web Viewer
List of Words:
boston
chicago
los angeles
miami
miami
boston
boston
miami
miami
chicago
boston
los angeles
miami
las vegas
boston
los angeles
miami
miami
chicago
portland
san francisco
san francisco
san francisco
san francisco
san francisco
san francisco
san francisco
san francisco
san francisco
san francisco
providence
newark
miami
new york city
miami
boston
boston
chicago
los angeles
miami
miami
san diego
san diego
san diego
san diego
san diego
miami
chicago
boston
miami
new york city
Code to run on a list of items above:
$('.tag').tagcloud();
Results:
boston
chicago
los angeles
miami
miami
boston
boston
miami
miami
chicago
boston
los angeles
miami
las vegas
boston
los angeles
miami
miami
chicago
portland
san francisco
san francisco
san francisco
san francisco
san francisco
san francisco
san francisco
san francisco
san francisco
san francisco
providence
newark
miami
new york city
miami
boston
boston
chicago
los angeles
miami
miami
san diego
san diego
san diego
san diego
san diego
miami
chicago
boston
miami
new york city
Code with options:
$('.tag').tagcloud({
size: {start: 14, end: 30, unit: "px"},
color: {start: '#333', end: '#f52'}
});