Blog

Text Cloud in Flash

by Dan on Monday, July 09, 2007

This post outlines an idea that we’ve come up with for visualising a list of information in interesting ways. We’ve included some code examples, a live example, and you can download the source code to roll your own.

First, some background. We’re working on a project that had some kind tag cloud as part of the layout, serving both as navigation and a quick way of visualising what the content (in this case books) was about. Initially, the idea was to have a regular tag cloud. Content within the site would be tagged by users, and then we’d display these as links next to the book as a way of showing what other people thought of/categorised the book as. Clicking on “green” would get you all of the other green books. The more often a book is tagged green, the bigger the green link becomes in the list.

But as the project progressed out of wireframe and into design, we came to the realisation that many of the pages probably wouldn’t get tagged – at least not by “real” users (read: not Red Ant people). One of the things we try to do in our design process is to have lots of reviews to really test out ideas with all of our team. What might seem a cool idea early on might end up being a production nightmare in the harsh light of day, or alternately someone might have a much better idea on how to do it. Someone brought up this Library Thing post which discusses tag clouds on Amazon and Library Thing – well worth a read if you’re considering using tag clouds as part of your site structure.

Tagging works well when people tag “their” stuff, but it fails when they’re asked to do it to “someone else’s” stuff. You can’t get your customers to organize your products, unless you give them a very good incentive. We all make our beds, but nobody volunteers to fluff pillows at the local Sheraton.

So, we had a problem in that the tag cloud idea wasn’t necessarily going to work getting tags from users. But it did work as a visual device- a really simple way of getting the overall flavour of content on any given page. Joe Lamatia has an interesting post about moving away from basic tag clouds, and their value as a way of visualising information. Using his title as inspiration, we worked up this re-usable snippet that can be used in a Radiant page (or any page/CMS with some tweaks), and it looks like this:

  • Miles Franklin Award
  • versatile and provoking
  • powerful narrative
  • mystifying power
  • Queensland
  • most impressive novel
  • Essential reading
  • love and betrayal
  • inter-racial relationships
  • Indigenous spirituality
  • colonial violence

Example of Text Cloud in Flash. Refresh the page and you’ll see the keywords written out as text, and then get replaced with the Flash.

Integrating a text cloud into Radiant

To make it easy to generate a text cloud in our CMS (we’re using Radiant), we thought that a simple ordered list was the most logical/semantic choice for content. We didn’t want our content authors having to remember lots of markup to generate what was in essence a list of keywords describing the content. To add a text cloud, they add a “cloud” part to the page, and then use Textile to write a list of words, starting with the most important:

We grab the “cloud” bit with this code, which could be either in the layout or as a snippet

But this is only half the story. Next, we could have gone 2 ways. The first would have been to simply style the content via CSS and Javascript, and the second was to use Flash. The advantage of Flash here is that it gave us a bit more freedom with regard to font, effects, and speed of production. The Javascript feeds this list of words into a Flash movie and we let Flash handle the weighting. We used Prototype to parse the list, and added it as a variable into the embed code.

var so = new SWFObject("root.swf", "text-cloud-flash",
  "525px", "100%", "8", "#ffffff");

so.addVariable("tags",$$('div.text-cloud li').collect(
  function(li){return li.firstChild.nodeValue;}).join() );

so.write("text-cloud");

From there it is pretty straight forward. Flash randomises the array, calculates relative sizes of fonts, and generates our text cloud. The only tricky thing left to do is to resize the Flash content on the page to fit the height of it’s content. We didn’t want to limit the content author at all- if they want 5 words or 50 words, the Flash needs to deal with it gracefully. Again, this is handled with Javascript and Prototype. This means that the content editor doesn’t need to worry about passing additional arguments to make it bigger for more text, and we can be sure the text cloud will look the way it’s meant to look.

Try it out

Download and roll your own

9 comments on “Text Cloud in Flash”

  1. Joe Lamantia Says:

    Dan, Nice work - thanks for creating a tool and sharing it for others. What's the consensus on how these text clouds are working as placed on pages? How did you decide where to lay them out, and have people expressed satisfaction with the clouds? In other words, are they doing the job you had in mind? Cheers, Joe Lamantia

    Thu Jul 12 05:45:50 UTC 2007

  2. Dan Says:

    Hey Joe. Well in this project, we decided to put the text cloud below content in the middle column because we anticipated users would be scanning much of the content on first pass. Buried on the left or right, we felt it didn't serve as much benefit as in the middle, and the size of the fonts would have been much smaller. Added to that, if we had chosen to put it on the left or right instead of the middle, many of the pages would have been visually unbalanced. Having said that, I think it really depends what you are using it for. For us, for this project, it is a key tool to communicate information quickly and efficiently - a way to capture the audience.

    Fri Jul 13 14:52:56 UTC 2007

  3. Charlie Says:

    Hey Dan, Great work, it looks really sweet and I would like to give it a shot. The only problem is that the link to the 'flash-resize.js' file seems to be broken. Thanks a lot! //Charlie

    Sat Aug 11 07:16:13 UTC 2007

  4. Dan Says:

    Sorry. Link restored, try now.

    Fri Aug 17 08:37:06 UTC 2007

  5. Lars Says:

    Hi Dan, I'm working on a way of displaying statistical information with the use of a tag cloud. Instead of clicks on a link I would like to use the number of sales for a particular product. I than would like to visualize this with flash over a period of time so you can see certain keywords (attached to the product) increase in size or decrease in size in the animation. It should give us information about certain trends. Do you know of any good resources regarding this? The main goal is visualising statistical analysis with the use of flash.

    Fri Sep 28 05:08:34 UTC 2007

  6. Ben Says:

    Hi Lars, you could adapt this code to change over time- it is fairly modular. The main issue we've had with tag cloud representation is scaling of items according to weight- eg: if you have 3 items, and one is large, the other two are relatively small, then do you show the large one really really big and the other two tiny? This code ignores relative weight, and just spreads items out according to rank- so in my example you'd have one big, one medium, and one small. I'd argue that this makes sense most of the time, and also removes any chance that your data will create an unintentionally whacky tag cloud (one element really big, the rest tiny). So, my suggestion would be to have a go at using this tag cloud- we had a look around before making this and didn't find much (but please add a comment in if you do find anything useful!) Good luck - regards Ben

    Tue Oct 02 18:28:15 UTC 2007

  7. Ben Says:

    Just to clarify- there are plenty of tag clouds in Flash, that you can add to Wordpress etc. It's just that we didn't find anything specifically suitable for what we wanted to do (visualisation rather than just tags)

    Tue Oct 02 18:36:14 UTC 2007

  8. Charles Kwame Asamoah Says:

    Hi Dan.. I downloaded the samples you guys have on here so I could create my own tag clouds for the companies website but none of it seems to be working. Is there something I should pay special attention to? Thanks Charles

    Mon Jun 16 23:55:47 UTC 2008

  9. Dan Says:

    Charles, can you be a bit more specific about what is going wrong? Have you got an HTML page you could link us to for testing purposes?

    Mon Aug 18 15:17:23 UTC 2008

Leave a comment