cliques and bridges. Further, as with the indented-tree layout, multivariate data can easily be displayed alongside nodes. The problem of sorting the nodes in a manner that reveals underlying cluster structure is formally called seriation and has diverse applications in visualization, statistics, and even archaeology.

Matrix Views. Mathematicians and computer scientists often think of a graph in terms of its adjacency matrix: each value in row i and column j in the matrix corresponds to the link from node i to node j. Given this representation, an obvious visualization then is: just show the matrix! Using color or saturation instead of text allows values associated with the links to be perceived more rapidly.

The seriation problem applies just as much to the matrix view, shown in Figure 5c, as to the arc diagram, so the order of rows and columns is important: here we use the groupings generated by a community-detection algorithm to order the display. While path-following is more difficult in a matrix view than in a node-link diagram, matrices have a number of compensating advantages. As networks get large and highly connected, node-link diagrams often devolve into giant hairballs of line crossings. In matrix views, however, line crossings are impossible, and with an effective sorting one quickly can spot clusters and bridges. Allowing interactive grouping and reordering of the matrix facilitates even deeper exploration of network structure.

conclusion

We have arrived at the end of our tour and hope the reader has found the examples both intriguing and practical. Though we have visited a number of visual encoding and interaction techniques, many more species of visualization exist in the wild, and others await discovery. Emerging domains such as bioinformatics and text visualization are driving researchers and designers to continually formulate new and creative representations or find more powerful ways to apply the classics. In either case, the DNA underlying all visualizations remains the same: the principled mapping of data variables to visual features such as position, size, shape, and color.

As you leave the zoo and head back

all visualizations
share a common
“Dna”—a set of
mappings between
data properties and
visual attributes
such as position,
size, shape,
and color—and
customized species
of visualization
might always be
constructed by
varying these
encodings.

into the wild, try deconstructing the various visualizations crossing your path. Perhaps you can design a more effective display?

 

Additional Resources

Few, S. Now I See It: Simple Visualization Techniques for Quantitative Analysis. Analytics Press, 2009. Tufte, E. The Visual Display of Quantitative Information. Graphics Press, 1983.

Tufte, E. Envisioning Information. Graphics Press, 1990. Ware, C. Visual Thinking for Design. Morgan Kaufmann, 2008.

Wilkinson, L. The Grammar of Graphics. Springer, 1999.

Visualization Development Tools

Prefuse: Java API for information visualization.

Prefuse Flare: ActionScript 3 library for data visualization in the Adobe Flash Player.

Processing: Popular language and IDE for graphics and interaction.

Protovis: JavaScript tool for Web-based visualization.

The Visualization Toolkit: Library for 3D and scientific visualization.

Related articles on queue.acm.org

A Conversation with Jeff heer, Martin Wattenberg, and Fernanda Viégas

http://queue.acm.org/detail.cfm?id=1744741

Unifying Biological Image Formats with hDF5

Matthew T. Dougherty, Michael J. Folk, Erez Zadok, Herbert J. Bernstein, Frances C. Bernstein, Kevin W. Eliceiri, Werner Benger, Christoph Best

http://queue.acm.org/detail.cfm?id=1628215

Jeffrey heer is an assistant professor of computer science at Stanford university, where he works on human-computer interaction, visualization, and social computing. He led the design of the Prefuse, Flare, and Protovis visualization toolkits.

Michael Bostock is currently a Ph. D. student in the Department of Computer Science at Stanford university. before attending Stanford, he was a staff engineer at google, where he developed search quality evaluation methodologies.

Vadim Ogievetsky is a master’s student at Stanford university specializing in human-computer interaction. He is a core contributor to Protovis, an open-source Web-based visualization toolkit.