DynaCloud is a jQuery plugin that generates tag or keyword clouds from text on web pages and highlights matching parts once a keyword is clicked.

Demo

Usage

Add DynaCloud

Download the jquery.dynacloud-5.js JavaScript (6 KB) and add it to your web page. A YUI compressed version (4 KB) is also available.

Add class attributes

Add the dynacloud class to all of the elements you want to have keywords generated from.

<div id="text" class="dynacloud">
 (your content)
</div>

<p class="dynacloud">
 (more content)
</p>

Create the target element

(Optional) Create an element with an id attribute of dynacloud. The tags will be filled into this element. If the element doesn’t exist, an empty paragraph will be created at the end of the document.

<div id="dynacloud"></div>

Style the highlight class

Create an entry in your style sheet for the highlight class.

.highlight { background-color: yellow }

Manual creation of tag clouds

Tag clouds can be generated dynamically using the dynaCloud method.

$("p.someclass").dynaCloud();

Custom Output Element

DynaCloud will be default create the tag cloud in an element with an id attribute of dynacloud. An optional parameter of the dynaCloud method can be used to specify a different output element.

$('#text').dynaCloud('#tagCloud');

Customization

Several aspects of DynaCloud can be customized.

Stopwords

DynaCloud filters out frequently occuring words like this, I or the (so-called stopwords). You can edit the list of stopwords by modifying or replacing the $.dynacloud.stopwords array.

$.merge($.dynacloud.stopwords, [ "der", "die", "das" ]);

Limiting the number of tags

DynaCloud will generate 20 tags at most. You can change this maximum by setting the $.dynaCloud.max property. If you set it to -1, the number of tags is unlimited.

$.dynaCloud.max = 42;

Sorting tags

DynaCloud will sort the tags first by descending frequency, then alphabetically. You can turn sorting off by setting the $.dynaCloud.sort property to false.

$.dynaCloud.sort = false;

Automatic generation of tag clouds

When the document has finished loading, DynaCloud automatically scans your document for elements with a class name of dynacloud. To create tag clouds manually, set $.dynaCloud.auto property to false.

$.dynaCloud.auto = false;

Allowing only one active tag

By setting the $.dynaCloud.single property to false, more than one tag can be selected.

$.dynaCloud.single = false;

Using wordStats if available

DynaCloud will use wordStats to calculate the topic of a web page if available. This behavior can be turned off by setting the $.dynaCloud.wordStats property to false.

$.dynaCloud.wordStats = false

Note that wordStats iterates over p, h1 and other elements of the DynaCloud element. Whereas the following HTML will work when using DynaCloud alone

<p class="dynacloud">Hello bla bla</p>

it will not work when using wordStats. WordStats needs child elements, like this

<div class="dynacloud">
 <p>Hello bla bla</p>
</div>

Changelog

• 2009-02-22: Bugfix for one or two strange problems with IE.
• 2008-09-26: Added custom output element, support for German Umlauts. Explained wordStats usage.
• 2008-06-04: Bugfix for incorrect DOM normalization. Thanks Georgy.
• 2007-08-24. Better jQuery integration and wordStats support.
• 2007-08-06. Initial release.

Credits

• The list of stopwords was taken from the Perseus English Index.
• Text highlighting for Mozilla and Opera was adapted from the Text and Data Bookmarklets page.