Gestalt Principles for Data Visualization

Figure/Ground and Metastability

Introduction

The classic examples of figure/ground and metastability in gestalt literature involve representations of human faces or familiar objects, and so it might not seem that they have bearing on data visualization. But the graphical elements that make up a data visualization, even a simple one like a line chart, can present some ambiguity as to what the figure is. Due to this ambiguity, a reader can unintentionally shift between the available discernable figures in such a way as to reduce the effectiveness of the data visualization. By recognizing this, a designer can focus a reader's attention--or influence the shifting attention--in such a way that complements rather than competes with the design of the chart.

To illustrate figure/ground, we have a bar chart, or two bar charts, depending on how you look at it.

Figure/Ground

Simply by outlining the rectangles in the region that could be a horizontal bar chart, we establish it as the figure and the orange area, which has a stronger hue and saturation signal, recedes into the background.

If we reverse this process, and use outlines to create a horizontal bar chart, then the reverse occurs. The pink region recedes and becomes the ground while the orange region becomes the figure. In either case, metastability issues are present both because of the strong color signals and our memory of the chart in its previous horizontal bar chart form.

Transitioning between the two. We use past experience to signal figure from ground with a neutral hue, low saturation color like light gray. This reduces the prominence of the secondary bar chart region, even when the charts are shown in animated succession.

But this may seem like a contrived example, and not indicative of real figure/ground and metastability issues at play in data visualization. After all, it's rare that someone uses a strong hue, highly saturated background color, or constrains a bar chart such that there is a second possible bar chart in the same area.

Implied Figure/Ground in Line Charts

Here we see a line chart of approval ratings of the last two US presidential administrations correlated over the course of the administrations from their start until early April of the seventh year. Approval ratings of the Bush administration are in green and the Obama administration in red. The ground seems obvious, given the axis and the muted background color, but the reader naturally transitions between three figures displayed.

The first two figures are the area under the lines. Line charts like these implicitly enclose an area, which is explicitly shown on the right. As readers interrogate the story of one administration or the other, they measure the increase and decrease in approval ratings against a scale enumerated by the axis. The boost in approval during the Bush administration after 9/11 is one of the phenomena prominent in this kind of figure. In this way, the lines are relative to the bottom of the chart and self-relative to the slope of the lines locally.

A third view is in the region constrained by the two lines themselves. When highlighted graphically, as is done on the right, this is known as a difference chart, first seen from Playfair in the 18th century. Now we see periods in the administrations when the performance of one administration, as measured by public approval, were better or worse than the other.

The number of pieces of this new figure depend on your story. If it's simply trying to point out the difference in perception, you would highlight this region in a neutral color. Here, though, the difference is highlighted in the color indicating which administration had a higher approval rating during that period. In effect, this creates two figures from one, with color indicating similar periods. Depending on how one interprets the resulting graphic, there might also be three or more figures made up of regions of commonality throughout these periods.

Conclusion

The phenomenon being graphically represented by shading the difference between approval ratings existed all along in the chart. By shading those regions, we emphasize it and better distinguish it from the other possible figures being represented in the chart. Even when more explicitly highlighting this figure, the other figures, that is to say the performance of each administration as a story of the administration alone, still exist perceptually to the user, and they can visually switch between those figures. The job of data visualization is to facilitate this switching when necessary, as well as to deccentuate possible figures so as to reduce metastability when that will disrupt the desired reading.

Data from the American Presidency Project at UCSB and Gallup.

Elijah Meeks - April 2015