Wordle – Beautiful Tag Clouds

wordle example 2

From the official website:

Wordle is a toy for generating “word clouds” from text that you provide. The clouds give greater prominence to words that appear more frequently in the source text. You can tweak your clouds with different fonts, layouts, and color schemes. The images you create with Wordle are yours to use however you like. You can print them out, or save them to the Wordle gallery to share with your friends.

[Editor’s note: This awesome tool from Jonathan Feinberg, a researcher at IBM, displays tag clouds the “right” way by packing the words into the interstitial space between tags and rotating tags from the horizontal baseline. Johnathan uses simple bounding box logic to accomplish this. I will look into adding this to my Adobe Illustrator script (and perhaps bound the tags into a user-defined shape like a heart for Valentine’s day).

If you look at the HTML tag cloud that is generated for my blog at the right sidebar you’ll see a bunch of text on the same horizontal baselines. That type of tag cloud wastes a lot of space by not packing the words closer together. If there is a big word with small words on 1 line, there is a lot of wasted white space around the smaller words on that line. Fast but not pretty. And only horizontal. Up until now packed tag clouds have taken tedious hand-placement by an artist.

Now Wordle, a web Java applet will do that for you. The tag clouds can be saved as vector PDF by printing to that format in your web browser. This will generate a vector-outlined version of the tags (outlined fonts, not editable type) and in rich-black RGB color space so make sure to convert and clean-up in CMYK before publishing! There is no restriction on publishing the tag clouds for profit or otherwise. Seen on infosthetics.com.]

Tags: , , , , , , , , ,

6 Responses to “Wordle – Beautiful Tag Clouds”

  1. It’s not quite “simple bounding box,” which wouldn’t permit words inside words, or nestling up to ascenders and descenders. It’s full glyph intersection testing, but with a sprinkle of CS applied to make it work at interactive speeds.

  2. nathaniel says:

    Ah, so I’d have to do the final positioning in Flash’s ActionScript instead of Adobe Illustrator’s ExtendScript to get the true-shape hit-tests instead of the rough-bounding boxes. Perhaps I’ll just write a script that opens your PDF and converts to CMYK 🙂

  3. Does Flash provide something analogous to Java’s Shape, that will enable you to do that kind of hit-testing? I’ve always assumed I couldn’t have implemented Wordle in Flash.

  4. nathaniel says:

    Yes, Flash is great at doing hit tests. The default is full shape hitTesting (not bounding box)… and you can even set up proxy shapes to result in hitTests on primary objects 🙂

    See here for working example with code:

    You would make a movieClip container for each tag word/phrase and make a textField inside each with the actual tag content. Then do the same placement logic you already have based on the movieClip containers. It should be fast and elegant.

    But Flash is not as good about printing (the default is to rasterize vector elements) so you’d have to work around that if someone were to still use it as a production tool.

  5. nathaniel says:

    Nifty! Thanks for sharing 🙂 I’d love to be able to select my own shapes to fit the tag clouds into with such a tool as yours. When you’re farther along on development please let me know and incorporate some of your code into my Illustrator tool. BTW, the Flash example you posted goes slower than 40 per 3 seconds, more like 1 every second for me.