Information Visualization Alvitta Ottley Washington University in - - PowerPoint PPT Presentation

Information Visualization

Alvitta Ottley Washington University in St. Louis CSE 557A | Jan 23, 2018

Annoucements.

Due tonight

Due in two weeks

Debate Topic Change

Sub Visual Embellishment for Bar vs. Pie

• Last names A-L: Pro Bar
• Last name M-Z: Pro Pie

Memorability.

What makes a visualization memorable?

I enjoyed this research paper because it validated opinions I already had about pretty-looking charts. Though it is always important to keep the audience in mind when creating visualizations, adding visual interest only draws more focus to the data and can even support the conclusions that can be drawn from the trends of the graph (leading to a more rapid interpretation of the information). I also liked how the paper touched upon the idea of bias that could be created through the imagery. In my opinion, however, if the corresponding “chart junk” is negative, but represents the conclusion to be drawn from the presented data, there is no bias to be

• drawn. Especially if a minimalist graph would bring a user to the same
• conclusion. Designers just have to be careful that the imagery represents

the data correctly.

Noteworthy points.

I enjoyed some of the discussion [presented] in the article, especially the section on the implications of minimalist charts. I think it is important to recognize that minimalist charts still carry biases within them and a simple chart can still be used to promote deceptively or in a rhetorical sense that manipulates the reader. I felt that the study itself was the weakest part of the paper, …

Did they really measure memorability?

One major problem I see with this study is that it seems to be more a test of uniqueness than memorability. Simple charts look more similar than [junk] filled charts do since they have standard rules that they

• follow. So if a user is going through many charts as the turk workers

are, they will be able to identify the unique ones, but struggle to differentiate the simple ones. This means that the way of measuring memorability is flawed and is not testing what they are trying to test.

Were they asking the right question?

Honestly, this entire study seemed a little pointless to me. When reading through the paper, I thought the researchers were going to study how participants recollected data from charts with more junk than others. I was interested to see how participants recalled what the graphic was actually communicating. However, …

What are the “right” measures for evaluating visualizations?

Future Work

It would be interesting to use eye movement to track what people look at on the more and less memorable visualizations. Differences may provide insight into specific elements that aid in

• memorability. Furthermore, I believe completely ignoring the

difficulty of the underlying data was a mistake. The study should have labeled each visualization with a difficulty score, and then examined if there was any correlation between that score and

• memorability. Representative samples would be necessary, but

preliminary results might help direct a future study.

Tufte.

“Above all else, show the data.”

Edward Tufte

• Evangelist for good visual design
• Most designs are static, but many principles apply

to interactive (computer-based) visualization designs

• Take these design guidelines with a grain of salt

Edward Tufte

Tufte’s Lessons

• Graphical Integrity
• Graphical Excellence

Graphical integrity

Clear, detailed, and thorough labeling should be used to defeat graphical distortion and ambiguity.

Tufte 2001

Missing scales

Tufte 2001

Missing scales

Tufte 2001

What is the baseline?

Missing scales

Tufte 2001

What is the baseline?

• $4,200,000

Graphical integrity

Clear, detailed, and thorough labeling should be used to defeat graphical distortion and ambiguity. “Above all else show the data”

The lie factor

• Tufte coined the term “the lie factor”, which is

defined as:

Lie_factor =

• “High” lie factor (LF) leads to:
• Exaggeration of differences or similarities
• Deception
• Misinterpretation

The lie factor

• The Lie Factor (LF) can be:
• LF > 1
• LF < 1
• If LF is > 1, then size of graphic is greater than the size of data
• This leads to exaggeration of the data (overstating the data)
• If LF < 1, then the size of the data is greater than the graphic
• This leads to hiding the of data (understating the data)

How to lie with Visualizations.

What is wrong with this?

The US Department of Transportation had set a series of fuel economy standards to be met by automobile manufacturers, beginning with 18 miles per gallon in 1978 and moving in steps up to 27.5 by 1985.

What is wrong with this?

The line representing 18 miles per gallon in 1978, is 0.6 inches long The line representing 27.5 miles per gallon in 1985, is 5.3 inches long

What is wrong with this?

• The increase in real data between 1978 to 1985 (from 18 MPG

to 27.5 MPG) is:

27.5 − 18.0 18.0 ×100 = 53%

• The difference in length between 1978 to 1985 (from 0.6 inches

to 5.3 inches) is:

5.3 − 0.6 0.6 ×100 = 783%

• Lie Factor is:

783 53 = 14.8

Lie factor example

This design contains a lie factor of 9.4

Lie factor example

This design contains a lie factor of 9.5

Other ways to lie: encoding

Other ways to lie: design variation

Other ways to lie: design variation

Beware of the “3D” effect. It distorts the telling

• f the data.
• There are five vertical scales here:
• 1073-1978: 1 inch = $8.00
• Jan-Mar: 1 inch = $4.73
• Apr – Jun: 1 inch = $4.37
• Jul – Sep: 1 inch = $4.16
• Oct – Dec: 1 inch = $3.92
• And two horizontal scales:
• 1973-1978: 1 inch = 3.8 years
• 1979: 1 inch = 0.57 years

Other ways to lie: the 3d effect

Other ways to lie: double encoding

Other ways to lie: double encoding

• Here, both width and height encode

the same information. The effect is multiplicative. 0.44 (width) * 0.44 (height) = 0.19

Other ways to lie: Unintended Encoding

Other ways to lie: Unintended Encoding

London Lisbon Mocsow

Other ways to lie: Alignment

Other ways to lie: Limiting Context

Other ways to lie: Limiting Context

How to visualize truthfully.

How to NOT lie

“Maximize the Data-Ink Ratio”

Data-ink ratio

Data-ink ratio

• The goal is to aim for high data-ink ratio
• Ink used for he data should be relatively large compared to the ink in

the entire graphic

High Data-ink ratio Example

In-class activity

Redesign the following graph to maximize data-ink ratio

How many times is height encoded?

In-class activity

Erasing non-data ink

Erasing non-data ink

Multiple encodings:

1. Height of the left line 2. Height of the right line 3. Height of shading 4. Position of top horizontal line 5. Position (placement) of the number 6. Value of the number

Erasing non-data ink example

Results of a study indicating that one type

• f element always has a

higher value under different experimental conditions

Erasing non-data ink example

After removing all non- data ink

Erasing non-data ink example

The ink that has been removed

Thoughts about this?

Redesign the box plot by erasing non-data ink.

In-class activity

Thoughts about this?

Summary of design principles

• 1. Above all else show the data
• 2. Maximize the data-ink ratio
• 3. Erase non-data-ink
• 4. Erase redundant data-ink
• 5. Revise and edit

Useful Junk?

ChartJunk and Recall

Bateman et al. “Useful Junk? The Effects of Visual Embellishment on Comprehension and Memorability of Charts”, CHI 2010

Chart Junk and Eye Gaze

Results Recap

• 1. No significant difference between interpretation accuracy
• 2. No significant difference in recall accuracy after a five-minute gap
• 3. Significantly better recall for Holmes charts of both chart topic and

the details (categories and trend) after long-term gap (2-3 weeks).

• 4. Participants found the Holmes charts more attractive, more

enjoyable, and were easiest and fastest to remember.

The purpose of some actions is not the effect they have on the environment but the effect they have

• n the humans.

Discussion

• Notice the bar has significantly shifted when defining visual

embellishments.

• Will you use “visual embellishments” for your assignments?

If so, why?

Next Time.

• Another paper on
• Studio on animated transition