[layout] Algorithm to implement a word cloud like Wordle

4 Answers

Here's a really nice javascript one from Jason Davies that uses d3. You can even use webfonts with it.

Demo: http://www.jasondavies.com/wordcloud/

Github: https://github.com/jasondavies/d3-cloud



My Questions

  • Is there an algorithm available that does what Wordle does?
  • If no, what are some alternatives that produces similar kinds of output?

Why I'm asking

  • just curious
  • want to learn

I have a Tag Cloud generator here, which I call Disorganizer :)

Sources TagCloudService and the razor markup control and a WinForm for testing purposes that you can put in your blog, profile etc, with a little wrapper around it. It uses C# 4.0 & System.Drawing namespace heavily.

I created it because with the other cloud generators you cannot click on tags to navigate and cannot create hover animations, to show that they are clickable. Since showing hover animation in HTML is necessary for me (I'm doing this with overlay-ed, absolutely-positioned <a> tags) I haven't developed any-angle word display - they are either vertical or horizontal.

Warning :The above links may go invalid in a few months, I plan to slowly untie it from the surrounding project into a separate project.

You can see a working demo on this sample blog post, but it is incomplete, and in an incomplete site. Contact me if anyone wants to contribute, I will get on with separating it out asap.

I've created a Silverlight component that uses the algorithm Jonathan suggests here. The source code and example projects are all available on my blog:


My cloud lets you color and size words based on different weightings and it supports word selection (from a coordinate) and selected word highlighting. The source is yours to use as you see fit.