Interaction CS 7250 S PRING 2020 Prof. Cody Dunne N ORTHEASTERN U - - PowerPoint PPT Presentation

▶
interaction
SMART_READER_LITE
LIVE PREVIEW

Interaction CS 7250 S PRING 2020 Prof. Cody Dunne N ORTHEASTERN U - - PowerPoint PPT Presentation

Jan 21, 2023 863 likes •1.34k views

Interaction 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 B URNING Q UESTIONS ? 2 P

slide-1
SLIDE 1

Interaction

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

BURNING QUESTIONS?

2

slide-3
SLIDE 3

PREVIOUSLY, ON CS 7250…

3

slide-4
SLIDE 4

Color Vocabulary and Perceptual Ordering

4

Based on Slides by Miriah Meyer, Tamara Munzner

Darkness (Lightness) Saturation Hue

? ?

slide-5
SLIDE 5

“Simultaneous Contrast”

5

Avoid gradients as backgrounds or bars!

slide-6
SLIDE 6

NOW, ON CS 7250…

6

slide-7
SLIDE 7

ONE LAST ILLUSION…

7

slide-8
SLIDE 8
slide-9
SLIDE 9

9

E90E50, 2016

slide-10
SLIDE 10

Northeastern University, Khoury College, 2016 10

slide-11
SLIDE 11

Hall of Fame or Hall of Shame

11

slide-12
SLIDE 12

12

FiveThirtyEight, 2015

slide-13
SLIDE 13

13

FiveThirtyEight, 2015

ColorBrewer 'RdYlBu' scale, 2013

slide-14
SLIDE 14

14

FiveThirtyEight, 2015

slide-15
SLIDE 15

INTERACTION

15

slide-16
SLIDE 16

GOALS FOR TODAY

  • Learn when and why to use interaction.
  • Learn the “Shneiderman Mantra”.
  • Learn the basic interactive functions for visualizations.

16

slide-17
SLIDE 17

17

Interaction

  • Complexity reduction
  • Static = specific story told to you, versus interactive =

viewer discovers the story

  • Enables data exploration, insight, reasoning for oneself
  • Makes it personal to the viewer
  • Dive deeper!

Why interaction?

slide-18
SLIDE 18

18

Interaction

  • Interaction requires human time and attention
  • Human-guided search vs. Automatic feature

detection vs. Interactive visualizations

  • Find balance between automation and relying on

the human in the loop to detect patterns A few footnotes...

Based on Slide by Hanspeter Pfister

slide-19
SLIDE 19
slide-20
SLIDE 20
slide-21
SLIDE 21

21

  • Change over time
  • Encodings, Animated Transition
  • Selection
  • Highlight
  • Navigation
  • Pan/Translate, rotate, zoom

Interaction

Key Concepts:

Based on Slide by Miriah Meyer

slide-22
SLIDE 22

22

“Overview first, zoom and filter, and details on demand.”

  • Ben Shneiderman

“The Shneiderman Mantra”

Shneiderman, 1996

slide-23
SLIDE 23

23

  • Overview - provide high-level view/summary
  • Zoom and Filter - enable data discovery and exploration,

support search/tasks

  • Details on Demand - do not overwhelm the viewer by

providing extra information as needed

Interaction

Shneiderman Mantra:

Based on Slide by Miriah Meyer

slide-24
SLIDE 24

24

Shneiderman, 1996

slide-25
SLIDE 25

25

Gapminder Bubbles

Gapminder, 2018

slide-26
SLIDE 26

26

D3 General Enter, Update, Exit Pattern

Mike Bostock, 2016

slide-27
SLIDE 27

27

D3 Animated Transitions

Mike Bostock, 2011

slide-28
SLIDE 28

28

Centroidal Voronoi Tesselation

Dunne, 2015

slide-29
SLIDE 29

29

NYT Campaign Connections

NY Times, 2015

slide-30
SLIDE 30

30

Bubble Cursors

Grossman and Balakrishnan, 2005; Anand Kulkarni, 2010

slide-31
SLIDE 31

31

Voronoi Cursors

Mike Bostock, 2019

slide-32
SLIDE 32

32

Navigation

Google Maps, 2020

slide-33
SLIDE 33

IN-CLASS EXERCISE

33

slide-34
SLIDE 34

34

Zoom techniques

In-class activity: experiment with zooming and panning

easypz.io

Michail Schwab PhD student Khoury Data Visualization

slide-35
SLIDE 35

35

Queries and Filtering

slide-36
SLIDE 36

36

Queries and Filtering

Ben Fry, 2014

slide-37
SLIDE 37

37

Queries and Filtering

Kayak, 2020

slide-38
SLIDE 38

38

Projection

Pandey et al. (inc. Dunne, Borkin), 2019

slide-39
SLIDE 39

IN-CLASS EXERCISE

39

slide-40
SLIDE 40

MBTAVis: Excellent WPI course final project

Barry & Card, 2014

40

slide-41
SLIDE 41

In-Class Critique — MBTAVis

15m

In-Class Critique — MBTAVis

41

slide-42
SLIDE 42

Paper Prototyping

42

Analitico, 2013; Rajkumar, 2017

slide-43
SLIDE 43

Paper Prototyping

43

Aaron Brako, 2016

slide-44
SLIDE 44

Low Fidelity to High Fidelity

CanvasFlip, 2016 44

slide-45
SLIDE 45

45

Sketching of Interactivity

Hennigs, 2013

slide-46
SLIDE 46

Example Usability Test with a Paper Prototype

46

BlueDuckLabs, 2010