DynaCloud - a dynamic JavaScript tag/keyword cloud with jQuery

Posted 2007-08-06 in JavaScript by Johann.

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

Generate a tag/keyword cloud from this blog entry.

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.

17 comments

#1 2007-09-20 by Andy matthews

This TOTALLY needs to be a Firefox plugin. Imagine clicking a Dynacloud button and getting a tag cloud. That would be SEO worthy for sure.

#2 2008-01-24 by Shane

Great script!

Just got an idea as to how to use your plugin. Sell this to SEO freaks so that they can check for keyword density.

#3 2008-04-02 by Johann

John,

the block starting with $("#dynacloud a").each(function() { will prevent the links from working. Try commenting it out.

#4 2008-04-02 by John

I have edited the out.append line in the code to create a valid href link but when I click on it, nothing happens?
Here is an extract of my changed code;
out.append("<a href='modules.php?name=Search&query=" + cl[i].el + "'........
In the page source it produces a valid clickable a href link but it simply doesh't work.
I have obviously missed something but js in not my strong suite so any help or guidance would be appreciated.
Thank you for making this though and for sharing it.

#5 2008-04-02 by John

Thank you, that worked great when I remembered to comment out the last line of the block to remove the function properly.
Many thanks once again for sharing this, it's great!

#6 2008-11-19 by Screamo

Hi,

I was wondering if it is possible to include this in a blog on www.blogger.com ?

If it is, how would I go about implementing it?

Regards

#7 2008-11-19 by Johann

Screamo,

yes, as long as you can edit the page's template. Google already hosts jQuery and you can always put the DynaCloud code on each page in a <script> element.

#8 2009-01-20 by Grzegorz Wronkowski

Is there any support for non-english characters? I would like to use thise script with Polish letters. Actually this great script is parsing only latin characters, and when it finds strange letter cut it to parts. Thank You for help.

#9 2009-01-24 by Johann

Grzegorz,

you can add any character to line 18 and 19. Let me know if you need any help.

#10 2009-06-27 by Grzegorz

In my editor (NetBeans) between line 18019 I have this:

jQuery(function() {
jQuery.highlight = document.body.createTextRange ?

So where to add my non-latin characters?
Thank;s for reply and for help

#11 2009-07-02 by Johann

Grzegorz,

sorry, I don't know how I came up with the two numbers above. The correct line numbers are 119 and 120.

#12 2009-12-11 by tatoman

How i can put ñ, Ñ, á, é, í, ó, ú, /, \
?
I see this lines: var elems = jQuery(this).text().replace(/[^A-Z\xC4\xD6\xDCa-z\xE4\xF6\xFC\xDF0-9_]/g, ' ').replace(jQuery.dynaCloud.stopwords, ' ').split(' ');
var word = /^[a-z\xE4\xF6\xFC]*[A-Z\xC4\xD6\xDC]([A-Z\xC4\xD6\xDC\xDF]+|[a-z\xE4\xF6\xFC\xDF]{3,})/; but i don´t know how do it.

#13 2009-12-14 by Johann

tatoman,

what you can try is this:

escape('ñÑáéíóú/\\').replace(/%/g, '\\x')

which results in

"\xF1\xD1\xE1\xE9\xED\xF3\xFA/\x5C"

#14 2009-12-14 by tatoman

thanks! only one more question, i can't understan very much java code, i works in asp, How the code result then?

Thanks again

#15 2009-12-17 by Johann

tatoman,

all you need to do is to add the hex encoded characters to the character classes you copied above.


   var elems = jQuery(this).text().replace(/[^A-Z\xC4\xD6\xDCa-z\xE4\xF6\xFC\xDF0-9_\xF1\xD1\xE1\xE9\xED\xF3\xFA/\x5C]/g, ' ').replace(jQuery.dynaCloud.stopwords, ' ').split(' ');

   var word = /^[a-z\xE4\xF6\xFC\xF1\xE1\xE9\xED\xF3\xFA]*[A-Z\xC4\xD6\xDC\xD1]([A-Z\xC4\xD6\xDC\xDF\xD1]+|[a-z\xE4\xF6\xFC\xDF\xF1\xE1\xE9\xED\xF3\xFA]{3,})/;

#16 2010-02-07 by 3dWEb

this is a great idea! what if i wanted the tags to be variables instead of it highlighting. how can i go about doing this?, my idea is i want to be able to click on the word and it to search on my site using that keyword.

3dweb.

#17 2010-02-08 by Johann

3dWEb,

simple. You put together the URL for your site search in line 162 and then remove lines 165 to 180 (those are for the highlighting).

RSS 2.0, Atom or subscribe by Email.