login | login/register with OpenId | register | help
Word cloud from any page, using jQuery


This project is completed.
Project showcase

Here's a screenshot of the result:

http://www.fsavard.com/blog/2009/02/clusterify-project-word-cloud-bookmarklet/

For the story, impeachgod created a first version, which worked but used some very fancy code to handle to positioning in the cloud:

http://impeachgod.webs.com/wordle.html

I've reused the analysis part of that and wrapped it in a bookmarklet, taking bits here and there to extract the text on the page and to make a more straightforward cloud using <span style='font-size: ..px'> tags. Here it is:

http://www.fsavard.com/code/wordcloud.js

Project description

A 30 minutes project. We just create a bookmarklet which loads a piece of JavaScript to extract text in text nodes on the page, build a frequency dictionary and output a word cloud with that. It's mostly for fun, but it could have limited utility for summarizing.

I propose to do this using jQuery.

Tasks

  • The bookmarklet
  • The word extraction
  • The output -- we can be creative here

Links

  • EtherPad started by psytek: http://etherpad.com/msOkE3NfAl

See also links by psytek bellow concerning bookmarklets/jQuery.

Comments
Project author and members receive automatic email notifications when comments are posted.

Here's a mostly done word cloud: (http://impeachgod.webs.com/wordle.html) There are a couple of bugs but it should work OK.


Here's a mostly done word cloud: http://impeachgod.webs.com/wordle.html There are a couple of bugs but it should work OK.

Note: fixed link. This site needs ability to edit comments.


Thanks for the feedback: we'll add ability to edit comments.


@impeachgod: I tried going to your site, but at first I didn't see the "create wordle" link (it was behind a footer banner placed by your host).

The frequency analysis looks good, but the cloud creation is very CPU intensive (I think it's because you create divs one after the other, adding them one by one to the DOM using with stringified HTML).

I think we could do much simpler for positions in the cloud: usually word clouds are done using <font size="(based on frequency)">word</font> <font...></font> lists: much simpler. Take a look at tocloud.com, for example: they output a bunch of <a style="font-size: x%">word</a> in an iframe.

But hey we should be doing this discussion live :P


http://www.learningjquery.com/2008/06/updated-jquery-bookmarklet here is a good link on getting jquery into a bookmarklet http://spruce.flint.umich.edu/~jalarie/jaa_kcd2.htm here is a jscript to bookmarklet converter http://etherpad.com/msOkE3NfAl here is an etherpad


I think this script is very close to what we want http://userscripts.org/scripts/source/625.user.js


OK I've reused the code by impeachgod and made the wordcloud with <span>s with font-sizes. It's under the form of a bookmarklet, which you can readily use. Check it out at: http://www.fsavard.com/code/wordcloud.js

The EtherPad has been updated, too.


You could add a comment if you were logged in.