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'}
});