Design Rules of Thumb Continued 2 CS 7250 S PRING 2020 Prof. Cody - - PowerPoint PPT Presentation

▶
design rules of thumb
SMART_READER_LITE
LIVE PREVIEW

Design Rules of Thumb Continued 2 CS 7250 S PRING 2020 Prof. Cody - - PowerPoint PPT Presentation

Oct 25, 2023 659 likes •987 views

Design Rules of Thumb Continued 2 CS 7250 S PRING 2020 Prof. Cody Dunne N ORTHEASTERN U NIVERSITY Slides and inspiration from Michelle Borkin, Krzysztof Gajos, Hanspeter Pfister, 1 Miriah Meyer, Jonathan Schwabish, and David Sprague P

slide-1
SLIDE 1

Design Rules of Thumb — Continued 2

CS 7250 SPRING 2020

  • Prof. Cody Dunne

NORTHEASTERN UNIVERSITY

1

Slides and inspiration from Michelle Borkin, Krzysztof Gajos, Hanspeter Pfister, Miriah Meyer, Jonathan Schwabish, and David Sprague

slide-2
SLIDE 2

PREVIOUSLY, ON CS 7250…

2

slide-3
SLIDE 3

JS, D3

3

slide-4
SLIDE 4

IN-CLASS PROGRAMMING — D3 LINE CHART (PART 1)

4

slide-5
SLIDE 5

NOW, ON CS 7250…

5

slide-6
SLIDE 6

IN-CLASS PROGRAMMING — D3 LINE CHART (PART 2)

6

slide-7
SLIDE 7

PREVIOUSLY, ON CS 7250…

7

slide-8
SLIDE 8

8

“Graphical Integrity”

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

  • ambiguity. Write out explanations of the data
  • n the graphic itself. Label important events in

the data.”

Tufte, “Visual Display of Quantitative Information” (1983)

(Axes and axis labels, titles, annotations, legends, etc.)

slide-9
SLIDE 9

9

“Graphical Integrity”

“The representation of numbers, as physically measured on the surface of the graphic itself, should be directly proportional to the numerical quantities measured.”

Tufte, “Visual Display of Quantitative Information” (1983)

slide-10
SLIDE 10

NOW, ON CS 7250…

10

slide-11
SLIDE 11

DESIGN & RULES OF THUMB

11

slide-12
SLIDE 12

12

“The representation of numbers, as physically measured on the surface of the graphic itself, should be directly proportional to the numerical quantities measured.”

Lie Factor

Lie Factor = (Size of effect in graphic) (Size of effect in data) Lie Factor = 1, accurate :) Lie Factor = <1, understating Lie Factor = >1, overstating

Tufte, “Visual Display of Quantitative Information” (1983)

slide-13
SLIDE 13

13

“The representation of numbers, as physically measured on the surface of the graphic itself, should be directly proportional to the numerical quantities measured.”

Lie Factor

Lie Factor = (Size of effect in graphic) (Size of effect in data) Image = 5.3” - 0.6” = 7.83 = 783% 0.6” Data = 27.5 - 18 = 0.53 = 53% 18 Lie Factor = 783% = 14.8 53% Lie Factor = >1, overstating

Tufte, “Visual Display of Quantitative Information” (1983)

slide-14
SLIDE 14

14

“The representation of numbers, as physically measured on the surface of the graphic itself, should be directly proportional to the numerical quantities measured.”

Lie Factor

Lie Factor = (Size of effect in graphic) (Size of effect in data) Image = 5.3” - 0.6” = 7.83 = 783% 0.6” Data = 27.5 - 18 = 0.53 = 53% 18 Lie Factor = 783% = 14.8 53% Lie Factor = >1, overstating

Tufte, “Visual Display of Quantitative Information” (1983)

18 27.5

slide-15
SLIDE 15

15

“The representation of numbers, as physically measured on the surface of the graphic itself, should be directly proportional to the numerical quantities measured.”

Lie Factor

Lie Factor = (Size of effect in graphic) (Size of effect in data)

Tufte, “Visual Display of Quantitative Information” (1983)

IN-CLASS ACTIVITY: Calculate for yourself! Don’t use 3D bar charts! Make sure area is proportional to data!

Image = 2 - 1 = 1 = 100% 1 Data = 2 - 1 = 1 = 100% 1 Lie Factor = 100% = 1 100%

✓ X X!!!

Image = 22 - 12 = 3 = 300% 12 Lie Factor = 300% = 3 100% Image = 2*π12 - 1*π0.52 = 7 = 700% 1*π0.52 Lie Factor = 700% = 7 100%

slide-16
SLIDE 16

16

“Graphical Integrity”

Data Ink = the ink used to show data

Tufte, “Visual Display of Quantitative Information” (1983)

Data Ink Ratio = data-ink total ink in graphic

Tufte: maximize the data ink ratio

Low Data Ink Ratio High Data Ink Ratio

slide-17
SLIDE 17

17

Reebee Garofalo, Genealogy of Pop/Rock Music

High Data Ink Ratio

slide-18
SLIDE 18

18

“Graphical Integrity”

“The number of information-carrying (variable) dimensions depicted should not exceed the number of dimensions in the data.”

Tufte, “Visual Display of Quantitative Information” (1983)

slide-19
SLIDE 19

“The number of information-carrying (variable) dimensions depicted should not exceed the number of dimensions in the data.”

“No Unjustified 3D”

# Dimensions in data: # Dimensions in plot: 3 3 # Dimensions in data: # Dimensions in plot: 3 4

19

slide-20
SLIDE 20

“The number of information-carrying (variable) dimensions depicted should not exceed the number of dimensions in the data.”

“No Unjustified 3D”

20

http://help.infragistics.com/Help/Doc/WinForms/2014.2/CLR4.0/h tml/Images/Chart_Bar_Chart_03.png http://img.brothersoft.com/screenshots/softimage/0/3d_charts- 171418-1269568478.jpeg

Occlusion! Lie Factor!

slide-21
SLIDE 21

21

http://stats.stackexchange.com/questions/109076/what-is-your-favorite-statistical-graph/109080

Unjustified 3D! Lie factor!

“No Unjustified 3D”

slide-22
SLIDE 22

“The number of information-carrying (variable) dimensions depicted should not exceed the number of dimensions in the data.”

“No Unjustified 3D”

22

slide-23
SLIDE 23

“The number of information-carrying (variable) dimensions depicted should not exceed the number of dimensions in the data.”

“No Unjustified 3D”

23

This is not just a design principle, it has lots of experimental and quantitative data to back it up!

slide-24
SLIDE 24

“The number of information-carrying (variable) dimensions depicted should not exceed the number of dimensions in the data.”

24

Tory, et al. (2007)

  • Dr. David Sprague

(Former Lecturer, Khoury)

slide-25
SLIDE 25

“The number of information-carrying (variable) dimensions depicted should not exceed the number of dimensions in the data.”

25

Tory, et al. (2007)

“Which spatial area contained the most points of a specified target value range?”

slide-26
SLIDE 26

“The number of information-carrying (variable) dimensions depicted should not exceed the number of dimensions in the data.”

26

Tory, et al. (2007)

slide-27
SLIDE 27

“The number of information-carrying (variable) dimensions depicted should not exceed the number of dimensions in the data.”

27

Borkin, et al. (2011)

“No Unjustified 3D”

slide-28
SLIDE 28

62%

Strong effect of dimensionality on accuracy

39%

How many diseased regions found?

ACCURACY

Borkin, et al. (2011)

slide-29
SLIDE 29

Pandey et al. VIS 2019

“No Unjustified 3D”

“The number of information-carrying (variable) dimensions depicted should not exceed the number of dimensions in the data.”

slide-30
SLIDE 30

Pandey et al. VIS 2019

“No Unjustified 3D”

“The number of information-carrying (variable) dimensions depicted should not exceed the number of dimensions in the data.”

slide-31
SLIDE 31

Pandey et al. VIS 2019

“No Unjustified 3D”

“The number of information-carrying (variable) dimensions depicted should not exceed the number of dimensions in the data.”