Dr. Dobb's Journal - January 2008 - (Page 20) d01jurg_p6db 11/8/07 11:17 AM Page 20 Core Technology by Jurgen Appelo Tag Clouds: Usability and Math Towards a generic approach Jurgen is chief information officer at ISM eCompany and can be contacted at j.appelo@ism.nl. According to Wikipedia, Flickr.com was the first website to use tag clouds for navigation. By now, however, they’re common on Internet sites, particularly those with large collections of data. In this article, I present techniques for building tag clouds and propose generic mechanisms for supporting different types of data collections. Three Functions A tag cloud (Figure 1) is a collection of tags, which is presented in such a way that the visual emphasis of each tag corresponds to the relative importance within the collection. (Depending on the context, tag clouds can also be called “text clouds,” “topic clouds,” or “word clouds.”) Tag clouds offer three functions in a single visual construction: • Users can easily search tags because the texts are sorted alphabetically. • Alternatively (and more spontaneously), users can let their navigation depend on any one of several options. • But even without navigation, font sizes carry an informative function in regards to the relative importance of different tags and content of the web site. data access, business logic, layout, and functionality in one piece of code—sometimes even in one class. My proposal treats the individual functional layers individually, one at a time. To me, this makes it easier to implement alternatives within the architectures. My examples are in Visual Basic. NET because its syntax is easy to grasp (especially by myself). Source Data As input for a tag cloud, you need a dataset consisting of at least three columns: • Text (to display). • Weight (to determine the font size). • Identifier (something to support navigation.) The weight in the dataset often represents some frequency—the number of times a text is used as a search term, or the number of items sold of a product. However, the weight is not always an integer value. You can also consider, say, election results consisting of political parties and their percentages, earthquakes and their intensity, or movie stars and their IQ. In fact, there is technically little difference between tag clouds, histograms, line graphs, and pie charts. (I wouldn’t be surprised to find the tag cloud as just another type of standard chart in Excel 2010.) While constructing the source data for a tag cloud, you can impose restrictions on the raw data in the system in three ways: After examining various approaches, I concluded that tag clouds are generally implemented for specific datasets and layouts, and consider alternatives for other types of data and other UI designs. Clearly, what is needed is a more generic approach. While I don’t present a complete implementation of a generic solution here, you can still use my examples as a starting point to build something much better than anything my Internet searches have produced to date. The design of a tag cloud consists of several functional layers. Most implementations I examined treat 20 Dr. Dobb’s Journal l www.ddj.com l January 2008 http://Flickr.com http://www.ddj.com
For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.