How to Visually Encode Uncertainty

Minimum Viable Visualization for CS524

View the Project on GitHub gioconte/MVV

Portfolio

Journal

BIGExplorer (tool)

BIGExplorer (Keynote Presentation)

STAR

Uncertainty: Visual Encodings

Many attempts have been conducted in the literature in order to find the the most proper visual channel to encode uncertainty. Although many visual encodings have been tested, transparency seems to be the most effective channel to encode uncertainty. An interesting study is reported by Sanyal et al. in [1]. The work reported a user study to compare ed evaluate different approaches. In particular they have tested:

From that study came out that error bars underperform withe respect to the others visualization techniques, while the others perform in a comparable way. Moreover, a common agreement among visualization researchers is that visualizing the uncertainty is highly related with the domain.

An interesting study was presented by Brown in [2]. In that study the motion channel was used to encode uncertainty of data. Especially, the author focused his attention on using a vibration technique. The main drawback of this technique is the perceptual issue. In fact, the vibration could distract the user reducing the effectiveness of the visualization technique.

A more recent study has been conducted on the visualization of uncertainty of graph edges[3]. Although uncertainty is usually considered as a new dimension that should be encoded with a different visual channel, they propose to encode simultaneously both the attribute of the edges and its uncertainty with two visual variables. In the work the authors analyzed different pairs of visual encodings such as lightness and saturation or fuzziness and saturation or few others. They evaluated the user perception with respect to specific tasks. This work is pretty interesting because it maps different dimensions at the same time opening a new path in the visualization of uncertainty.

Goal

The main goal of these simple visualizations is to visually encode the notion of "uncertainty". I have tried different channel like motion, color and shape to encode the uncertainty bound to data.

Data

To that goal, I have created a simple dataset. Each data point contains its position in x,y coordinates and a level of uncertainty. The idea behind this simple dataset is that the x-coordinate represents a point in time that is certain, while the y-coordinate represents the value of a measure to which is associated the uncertainty.

Motion

"Motion" was the first channel I wanted to explore. I propose two different approaches to render the uncertainty through this channel. In the first example, dots move around their average position. The amplitude of the oscillation depends on the level of uncertainty bound to the data point. The higher is the uncertainty, the higher is the amplitude of the oscillation. Moreover, the size of the dots decreases when the oscillation reaches the endpoints. MVV1

In the second example, dots still move around their average position, but the amplitude of the oscillations is constant. In this case the uncertainty is represented by varying the frequency of the oscillation itself. The higher is the uncertainty of the data point, the faster is its oscillation. More in details the position of each data point is computed as follows:

where "y.origin" is the original position of the data point. MVV2

Color

"Color" was the second channel I exploited. In the first example I use a linear scale ( MVV3), while in the second I use a quantile scale ( MVV4)

Shape

In the following example, I exploited the shape of the data point to represent uncertainty. Each data point is represented using a circle and an external border. The more distant is the external border, the more uncertain the data point is. MVV5

Motion and Shape

In MVV6 a combination of motion and shape is presented. The initial circles are stretched according the uncertainty of the data point plotted. The more stretched is the the data point, the more it is uncertain. Additionally, the more a shape is stretched, the higher is the level of transparency of the data point.

Bibliography

[1] - Sanyal, J., Zhang, S., Bhattacharya, G., Amburn, P., & Moorhead, R. J. (2009). A user study to compare four uncertainty visualization methods for 1d and 2d datasets. Visualization and Computer Graphics, IEEE Transactions on, 15(6), 1209-1218.

[2] - Brown, Ross. Animated visual vibrations as an uncertainty visualisation technique. In: Proceedings of the 2nd international conference on Computer graphics and interactive techniques in Australasia and South East Asia. ACM, 2004. p. 84-89.

[3] - Guo, H., Huang, J., & Laidlaw, D. Representing Uncertainty in Graph Edges: An Evaluation of Paired Visual Variables.