(So instead of the usual post modern critical musings, I figured I would write some professional articles to provide a vocabulary for anyone interested in the topologies of modern information visualization theory in the context of some recent RIA applications seen on the web — I expect an audience of 4 for this article). Oh – I introduce a few concepts in this article that are common in cognitive psychology, so I will try to provide links to definitions or articles in wikipedia to provide more information.
~ SemanticWIll

Abstract

I’ll take a more conversation tone (more conversational than I am on twitter) in introducing the concept of dynamic visualization of quantitative information for a couple of reasons. First, I feel that often times the theories discussed in the ‘ivory towers’ are considered too esoteric for the lay reader (which isn’t really true); and secondly, I wanted to share some of the fruits of my overpriced MS in information design with as many people as possible. So – put simply, dynamic visualizations can be thought of as extensions of multivariate displays (or multiple-variable displays). They attempt to overcome problems of static data by allowing real-time manipulation of information objects through dynamic data queries displayed in the user interface using such technologies as AJAX or rich internet applications with front ends implemented in Adobe (Macromedia once upon a time) Flash.

The visualizations that are created must support the cognitive requirements such as pre-attentive processing, working memory, etc.. To do this, many of the same theories, strategies, and techniques are also duplicated in a dynamic visualization (Image Theory, the Gestalt Laws, verbal / visual dual-coding, etc.) Instead, I will give a brief overview of the literature, cognitive processes, and techniques that are unique to dynamic displays. This article is roughly organized into the following sections: Introduction (WTF), Dynamic Visualizations (BBQ), and Conclusion (FTW), References, and Apologia.

Introduction (WTF)

What is a dynamic visualization? Simply stated, it is an alternative way of accessing a database in which it can be queried multiple ways in order to form a changing and multi-dimensional visualization of the data. Shneiderman (1999) states that dynamic queries involve “the interactive control by a user of visual query parameters that generate a rapid (100 ms update), animated, visual display of database search results.” (pg. 236) The visual results can be displayed in many ways. Tables, node and line diagrams, tree-maps, hierarchical data, data landscapes, geographical representations, and two-dimensional diagrams are just a few of the ways that dynamic visualizations can be displayed on a computer. (Shneiderman, 1999; Ware, 2000)

As with other types of visualizations, dynamic visualizations are an extension of working memory. However, its main goal is not to enable creativity or support problem-solving (although they are involved). The main goal of a dynamic visualization is to amplify cognition often times to aid decision making. A designer of a dynamic visualization must take into consideration all previous concerns about visualizations and add an additional dimension of real-time variances. The dynamic visualization acts “as an extension of cognitive processes, augmenting working memory by providing visual markers for concepts and by revealing structural relationships between problem components.”(Ware, 2000, pg. 335) While the main goal may be to amplify cognition, the designer shouldn’t just add vast amounts of data into a display, making it dense, complex, and confusing. Instead, the designer must focus on “the principle of reducing the cost structure of information.” (Pirolli, Card, & Van Der Wege, 2001) Dynamic visualizations must support search techniques, provide an overview of the data, and a specific subset of it.

The process of interacting with dynamic visualizations is typically broken down into three parts. Ware describes a process that consists of three interlocking feedback loops: manipulation, exploration and navigation, and problem-solving.(2000) Manipulation occurs when objects are selected and moved. Exploration and navigation is an intermediate level in which a user explores data and build a cognitive spatial model. Hypothesis generation and refinement occur in the problem-solving stage. Dynamic visualizations support cognition in this stage because users “can quickly perceive patterns in data, ‘fly through’ data by adjusting sliders, and rapidly generate new queries based on what they discover through incidental learning.”(Shneiderman, 1999, pg. 237) They can also quickly discover which sections of a multidimensional search space are densely populated and which are sparsely populated, where there are clusters, exceptions, gaps, or outliers, and what trends ordinal data reveal. Gapminder (Figure 1 by Ola Rosling) is a fantastic example of this – perhaps one of the best in turning dynamic visualization into a cognition-amplifying and gestalt-generating machine)

“Humans can recognize the spatial configuration of elements in a picture and notice relationships among elements quickly. This highly developed visual system means people can grasp the content of a picture much faster than they can scan and understand text. Interface designers can capitalize on this by shifting some of the cognitive load of information retrieval to the perceptual system. By appropriately coding properties by size, position, shape, and color, we can greatly reduce the need for explicit selection, sorting, and scanning operations.” Shneiderman, pg. 241)

Dynamic visualizations are most valuable in environments that require monitoring or manipulation of large quantities of data, in real time, and under tight time constraints. There are several benefits for the ability to directly manipulate data and have returned visuals. Beginners are able to learn basic functionality quickly, there is little need for error messages, users can immediately see if their actions are accomplishing their goals, and users feel in control (On Kayak.com, user un-checks a particular Airline, and those automagically disappear from the display of results is an example). However, there are risks to using dynamic visualizations. Bad, missing, or erroneous source data could lead to wrong conclusions, and false relationship identification. De-skilling, coupled with a false sense of security, could have serious consequences where patterns are missed. The face-validity of any visualization must be questioned when the decisions that are based off of the displays have serious consequences.

Dynamic Visualizations (BBQ)

There are many types of dynamic visualizations. Tables are perhaps the most simplistic display option for dynamic data. Other options are more visual such as hyperbolic tree browsers (See Figure 2 Revealicious), overview and detail displays, three-dimensional data landscapes, and tree maps. Inputting data into these displays are done through forms in which a user selects data to query. Radio buttons are preferred for selecting binary nominal variables whereas sliders “allow setting a single ordinal or quantitative variable value.” (Card, Mackinlay & Shneiderman, 1999, pg. 235)

Eick describes sliders as “a generic user input mechanism for specifying a numeric value from a range.” (1999, pg. 251) He goes on to explain that they have an added visual effect because the space inside the slider can serve as an interactive color scale, a bar plot for discrete data, or a density plot for continuous data. Eick states that the purpose of a slider is to control filtration and restriction of displayed information. Doing so reduces visual clutter and enables “users to see important underlying patterns. The pruning of visual clutter from data-rich displays by adjusting sliders is particularly effective in information visualization, and even more so when done dynamically.” (Eick, 1999, pg. 251) Figure 3 below is the interface for Kayak.com I designed which utilizes sliders to dynamically prune data by attributes such as price, departure time, airline – all facets attached to flight manifests.

Bertin and Greene’s planar and retinal variables are an integral part in any visualization in which data must be pre-attentively sorted and identified with graphic variables. Briefly, the process of data extraction consists of three stages in which the viewer

• determines what components are being represented,
• determines which components are mapped to which visual graphic variables; and finally
• perceives correspondence between components.

Bertin stated that a visual variable must have as many steps equal to or greater than the number of components it represents. A user can distinguish types of data either through serial or parallel processing. In serial processing, the user goes from target to target to determine differences in data. In parallel process, targets reveal measures through pre-attentive visualization techniques.

Overview + Detail

Overview + Detail refers to a group of visualizations that allow a general overview of information with the ability for a user to search and explore data to discover details and patterns. Within the visualization there is dedicated space for each and so there are really two displays within one visualization. “It reduces search, allows the detection of overall patterns, and aids the user in choosing the next move. A general heuristic of visualization design, therefore, is to start with an overview. But it is also necessary for the user to access details rapidly. One solution is overview + detail: to provide multiple views, an overview for orientation, and a detailed view for further work.” (Card, Mackinlay & Shneiderman, 1999, pg. 285) Examples of these types of displays are dashboards with spatial zoom displays, semantic zooming, zoom-and-replace, and tree maps (see the dashboard mockup Figure 4 below, where overview data is presented, but detailed views can be seen by clicking and graphs to drill down). One drawback from this type of visualization is that loads for working memory and visual search are increased which in turn degrade performance.(Card, Mackinlay & Shneiderman, 1999) Furnas (1981) explains that in the zoom system, local and global information is not available at once and so integration of the two must occur in human memory.

Focus + Context

Focus + Context is another technique that supports the ability to see an overview of information while having access to detailed data. Context refers to the necessity of a user to see the overview of the data while focus relates to detailed information. Another term for this group of techniques is distortion-oriented presentation techniques. (Leung & Apperley, 1999) Single visualizations are created with the knowledge that the information that is needed in the overview may be different from the data required for the detail. Focus + context techniques were created in the attempt to build one visualization which displays overview and detail information in a way that peripheral information is displayed in less detail while the information that is in focus is dynamic and dependent on the user’s interest.

The essence of these [focus + context] techniques is the concurrent presentation of local detail together with global context at reduced magnification, in a format which allows dynamic interactive positioning of the local detail without severely compromising spatial relationships.(Leung & Apperlay, 1999, pg. 352)

Focus + context displays are also referred to as attention-warped displays in that they distort the display in order to provide the maximum space for a use’s attention. This can be accomplished by filtering, selective aggregation, micro-macro readings, highlighting, and distortion. (Card, Mackinlay, Shneiderman, 1999)

There are many types of visualizations that use the focus + context technique. This technique “supports visualizing an entire information structure at once as well as zooming in on specific items.” (Rao & Card, 1999, pg. 343) The detailed view is blended with a view of the overall structure in a way that manipulation operations can navigate through the data. (Lamping & Rao, 1995) The context + focus techniques support different types of data and different user goals. Some of these are cone trees, fisheye view, bifocal lens, table lens, magic lens, hyperbolic browsers, perspective wall, polyfocal display, map displays, and bar charts such (see Figure 5 above – a dashboard example for the 2008 election).

Furnas (1981) proposed the fish-eye view as an alternative way to display a large structure. He uses detailed algorithms called the degree of interest metric to determine an appropriate balance between “the need for local detail against the need for global context: by showing full detail in the immediate neighborhood some place of current focus, but requiring increasing a priori importance as the distance from the focus increases.” (pg. 312) The variable zoom algorithm that creates the fisheye lens has been proven to support a user’s ability to maintain a global context within hierarchical clusters.(Schaffer et. al, 1996) Spence and Apperley’s (1999) bifocal lens is based on an overview + detail display. They inserted the detailed view into the overview in a way that resembled a bifocal lens. They used a point of interest where data that surrounds it is mapped and compressed based on their positioning within and from the focal area. A variation of this technique was extended into two dimensional form by Leung and by Mackinlay’s Perspective Wall. (Leung & Apperley, 1999) Rao and Card’s (1999) table lens is based on a focus + context fisheye technique to display tabular information using label information and multiple distal focal areas. Their hyperbolic browser is an additional focus + context technique that was “based on hyperbolic geometry for visualizing and manipulating large hierarchies. [It] assigns more display space to a portion of the hierarchy while still embedding it in the context of the entire hierarchy.” (Lamping & Rao, 1995, Pg. 382)

Conclusion (FTW)

Dynamic visualizations can be considered one of the most difficult displays to create. Systems can be extremely large, data could be constantly entering the system, and users can change queries instantly. Communicating the information in a meaningful way must be seriously considered. There are several techniques a designer can utilize to help reduce the cognitive load of a user and to support his/her cognition. Image Theory, the Gestalt Laws, working memory, learning theories, and biological processing all come into play in these visualizations. In this article, overview + detail and focus + context techniques were discussed. These techniques were created in the attempt to solve the problems “associated with the presentation of data in a confined space: a spatial problem and an information density problem.”(Leung & Apperlay, 1999, pg. 362)

The distortion techniques such as the hyperbolic browser and fisheye view largely address these issues, however there are always risks involved in using such techniques. Users can miss patterns and connections as well as make incorrect assumptions. Designers must understand how different displays support different types of data and different tasks in order to support user cognition. One of the places significant improvements can be made is that, given the increasing ubiquity of dynamic data visualization applications on e-commence websites and common applications like hotel and travel booking, the more important it is for designer’s to take these theories into account and try them in the real world.

Apologia (#formarketingreasons)

I realize there are a number of important concepts which I only briefly introduced here, as well as some more technical terms that I take for granted that the reader knows. These assumptions are problematic, and for that reason, on the next iteration of this article – I will need to include a glossary of terms and overview of some the basic concepts of information theory. Any further recommendations are always appreciated.

References : Everything you wanted to know about information visualization but were too darn cheap to buy the books. Note: I am exhausted, but need to include the appropriate links to the following resources for further information.

Card, S.K., Mackinlay, J.D. & Shneiderman, B. (1999) Readings in information visualization: Using vision to think. San Francisco: Morgan Kaufman.

Eick, S.G. (1999). Data Visualization Sliders. In S.K. Card, J.D. Mackinlay, & B. Shneiderman (Eds.), Readings in information visualization: Using vision to think (pp. 251-252). San Francisco: Morgan Kaufman.

Eick, S.G., Steffen, J.L., & Sumner, E.E. (1999). Seesoft – a tool for visualizing line oriented software statistics. In S.K. Card, J.D. Mackinlay, & B. Shneiderman (Eds.), Readings in information visualization: Using vision to think (pp. 419-430). San Francisco: Morgan Kaufman.

Furnas, G.W. (1981). The FISHEYE View: A New Look at Structured Files. In S.K. Card, J.D. Mackinlay, & B. Shneiderman (Eds.), Readings in information visualization: Using vision to think (pp. 312-320). San Francisco: Morgan Kaufman.

Greene, M. (1998). Toward a Perceptual Science of Multidimensional Data Visualization: Bertin and Beyond. ERGO/GERO Human Factors Science.

Lamping, J. & Rao, R. (1995). The hyperbolic browser: a focus + context technique for  visualizing large hierarchies. In S.K. Card, J.D. Mackinlay, & B. Shneiderman (Eds.), Readings in information visualization: Using vision to think. (pp. 382-408). San Francisco: Morgan Kaufman.

Leung, Y.K. Apperley, M.D. (1999). A Review and Taxonomy of Distortion-Oriented Presentation Techniques. In S.K. Card, J.D. Mackinlay, & B. Shneiderman (Eds.), Readings in information visualization: Using vision to think. (pp. 350-367). San Francisco: Morgan Kaufman.

Lin, X. (1999). Visualization for the Document Space. In S.K. Card, J.D. Mackinlay, & B. Shneiderman (Eds.), Readings in information visualization: Using vision to think. (pp. 432-439). San Francisco: Morgan Kaufman.

Pirolli, P., Card, S., & Van Der Wege, M. Visual Information Foraging in a Focus + Context  Visualization. CHI 2001, 3(1) 506-513.

Preece, J., Rogers, Y., & Sharp, H. (2002). Interaction Design: beyond human-computer interaction. John Wiley & Sons.

Rao, R. and Card, S.K. (1999). The table lens: Merging graphical and symbolic representations in an interactive focus + context visualization for tabular information. In S.K. Card, J.D. Mackinlay, & B. Shneiderman (Eds.), Readings in information visualization: Using vision to think. (pp. 343-349). San Francisco: Morgan Kaufman.

Schaffer, D., Zuo, Z., Greenberg, S., Bartram, L., Dill, J., Dubs, S., & Roseman, M. (1996). Navigating hierarchically clustered networks through fisheye and full-zoom methods. ACM Transactions on Computer-Human Interaction, 3(2) 162-188.

Shneiderman, B. (1999). Dynamic Queries for Visual Information Seeking. In S.K. Card, J.D. Mackinlay, & B. Shneiderman (Eds.), Readings in information visualization: Using vision to think. (pp. 236-243). San Francisco: Morgan Kaufman.

Ware, C. (2000). Information Visualization: Perception for Design. San Francisco: Morgan Kaufmann.

\A/

Tags | design, interaction design, ixd, linkedin, vizualization