Graphical Overlays: Using Layered Elements to Aid Chart Reading

Abstract

Original chart 1Chart with gridlines 2Line to illustrate trend 3Mean line 4 Fig. 1. In this chart of the European Union's budget by the BBC [7] the original design (1) forces viewers to mentally project a line to the y-axis to extract values. (2) A gridline overlay provides visual anchors, which can simplify the process of extracting values. (3) A line overlay encodes the data redundantly but better illustrates the trends in the data across time. (4) Finally, a statistical summary overlay depicts the mean value of the data so that viewers can easily compare each year's budget to the average budget across the years. All of these overlays were generated by our system without access to the underlying data, based on automatic extraction of the chart's mark and axis properties.Abstract-Reading a visualization can involve a number of tasks such as extracting, comparing or aggregating numerical values. Yet, most of the charts that are published in newspapers, reports, books, and on the Web only support a subset of these tasks. In this paper we introduce graphical overlays-visual elements that are layered onto charts to facilitate a larger set of chart reading tasks. These overlays directly support the lower-level perceptual and cognitive processes that viewers must perform to read a chart. We identify five main types of overlays that support these processes; the overlays can provide (1) reference structures such as gridlines, (2) highlights such as outlines around important marks, (3) redundant encodings such as numerical data labels, (4) summary statistics such as the mean or max and (5) annotations such as descriptive text for context. We then present an automated system that applies user-chosen graphical overlays to existing chart bitmaps. Our approach is based on the insight that generating most of these graphical overlays only requires knowing the properties of the visual marks and axes that encode the data, but does not require access to the underlying data values. Thus, our system analyzes the chart bitmap to extract only the properties necessary to generate the desired overlay. We also discuss techniques for generating interactive overlays that provide additional controls to viewers. We demonstrate several examples of each overlay type for bar, pie and line charts.

Order of Magnitude Markers: An Empirical Study on Large Magnitude Number Detection

“…Kong and Agrawala [12] present a system that is able to reverse engineer data sets from existing bar charts and then overlay additional cues to aid reading. Cues include reference structures (e.g., gridlines), redundant encodings (e.g., numerical labels) and summary statistics.…”

Highlighting interventions and user differences

“…Thus, our results may well generalize also to these visualizations. For example, [24] As for question 2, results show that no single highlighting intervention is the most effective in general. De-Emphasis always performed at the top, in terms of both performance and rated usefulness, but it was absolute best only with the simpler RV tasks, and when it was present from the beginning of the task (delivery condition T0).…”

“…Average reference lines have been used to visually compare individual marks to a predetermined value in various charts[26][24]. Bolding and de-emphasis form a perceptual group based on the Gestalt principle of similarity[24] and thus have been applied in various visualizations to relate items (e.g., TreeMap, Scatter Plot Matrix, Arc diagram[21]). We now discuss the user study results with respect to our original research questions.…”

Exploring the Potential of Physical Visualizations

“…The final design consisted of holes cut as circles (see Figure 5.7) into 5 mm thick transparent acrylic glass layers. To improve the readability and comparison of single values we experimented with various techniques from classical 2D visualizations such as graphical overlays (e.g., Kong and Agrawala [2012]) and symbols inspired by cartography (e.g., Hake [1970]). The outcome was to augment each circle with small guides (see Figure 5.6-bottom), which seemed to be the best compromise between enhancing the readability of exact values and not reducing the possibility to see through the single layers.…”