EDITOR Jonathan Grudin jgrudin@microsoft.com

Most HCI history articles trace digital developments back to the 1980s, 1960s, or earlier. Information visualization is moving so rapidly that it’s great to have a look back and glance forward on tag clouds, just over a decade old in digital form, from leading visualization researchers Fernanda Viégas and Martin Wattenberg. —Jonathan Grudin

Tag Clouds and the Case
for Vernacular Visualization
Fernanda B. Viégas

IBM Research | viegasf@us.ibm.com

Martin Wattenberg

IBM Research | mwatten@us.ibm.com

 

This is an exciting moment for visualization. It’s a time when the mainstream media is embracing sophisticated techniques born in university research labs—a time when you can open The New York Times and see complex treemaps and network diagrams. But just as exciting is the fact that some new visualizations, ones that get people talking and thinking about data in a new way, are emerging from outside the academy as well.

This is starting to happen often enough that it’s worth coining a term for techniques that originate outside the research community. Borrowing terminology from the design world, we’ll call them “ vernacular” visualizations—in a nod to Tibor Kalman’s admiration of “low” art [ 1]. This article focuses on one ubiquitous type of street-wise visualization: tag clouds. Born outside the world of computers, they were raised to maturity by Web 2.0 sites coping with an unwieldy world of collective activity. Tag clouds are an eclectic bunch spanning a

variety of data inputs and usage patterns that defy much of the orthodox wisdom about how visualizations ought to work.

Tag Clouds: A history

The basic look of a tag cloud—a combination of many different type sizes in a single view—goes back at least 90 years to Soviet Constructivism. Beyond the surface style, however, a tag cloud usually has a particular purpose: to present a visual overview of a collection of text. By this criterion, the first example may have been the outcome of an experiment carried out by social psychologist Stanley Milgram in 1976 [ 2]. Milgram asked people to name landmarks in Paris, and then created a collective “mental map” of the city using font size to show how often each place was mentioned (Figure 1).

Almost 20 years later, similar diagrams were created by a computer—but a fictional one. In Microserfs, Douglas Coupland’s 1995 novel, one of the characters writes a program to pick out random phrases from his electronic diary; the resulting

“subconscious files” are reproduced in the book.

In 1997 real life caught up with Milgram’s collective unconscious and Coupland’s fictional computer. That year programmer Jim Flanagan wanted a way to show which search terms had led people to his website. Varying type sizes was easy; in a page defined by HTML, he created a simple Perl script— “Search Referral Zeitgeist”—and the resulting graphic was eye-catching. However Flanagan’s script remained an obscure curiosity.

By 2001 clouds of words worked their way into mainstream media when Fortune magazine brought the “cloud aesthetic” to the world of finance [ 3]. A piece entitled “Money Makes the World Go ’Round” mapped the corporate landscape with circular masses of text showing the 500 largest corporations in the world, each cloud representing companies in a particular country (Figure 2). According to the graphic’s creator, John Tomanio, this was an independent invention. Perhaps

[ 1] Kalman, Tibor, Peter
Hall, Michael Bierut, and
Tibor Kalman. Perverse
Optimist. Princeton,
N. J.:Princeton
Architectural Press,
2000.

[ 2] Milgram, Stanley, and D. Jodelet. “Psychological Maps of Paris.” In Environmental Psychology, edited by W. I. H. Proshansky and L. Rivlin, 104–124. New York: Holt, Rinehart, and Winston. 1976.

[ 3] “Money Makes the World Go ‘Round.” Fortune. 23 July 2001. < http://money.cnn. com/magazines/ fortune/fortune_ archive/2001/07/23/ 307384/ index.htm>

[ 4] Maeda, John. “The Greatest Diagram of 2004.” Simplicity Blog, 14 March 2005 <http:// weblogs.media.mit. edu/SIMPLICITY/ archives/ 000164.html>