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

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 REVIOUSLY , ON CS 7250… 3

Color Vocabulary and Perceptual Ordering Darkness (Lightness) Saturation Hue ? ? Based on Slides by Miriah Meyer, Tamara Munzner 4

“Simultaneous Contrast” Avoid gradients as backgrounds or bars! 5

N OW , ON CS 7250… 6

O NE L AST I LLUSION … 7

E90E50, 2016 9

Northeastern University, Khoury College, 2016 10

Hall of Fame or Hall of Shame 11

FiveThirtyEight, 2015 12

ColorBrewer 'RdYlBu' scale, 2013 FiveThirtyEight, 2015 13

FiveThirtyEight, 2015 14

I NTERACTION 15

G OALS FOR T ODAY • Learn when and why to use interaction. • Learn the “ Shneiderman Mantra ”. • Learn the basic interactive functions for visualizations. 16

Interaction Why 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! 17

Interaction A few footnotes... • 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 Based on Slide by Hanspeter Pfister 18

Interaction Key Concepts: • Change over time - Encodings, Animated Transition • Selection - Highlight • Navigation - Pan/Translate, rotate, zoom Based on Slide by Miriah Meyer 21

“Overview first, zoom and filter, and details on demand.” - Ben Shneiderman “The Shneiderman Mantra” Shneiderman, 1996 22

Interaction Shneiderman Mantra: • 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 Based on Slide by Miriah Meyer 23

Shneiderman, 1996 24

Gapminder Bubbles Gapminder, 2018 25

D3 General Enter , Update , Exit Pattern Mike Bostock, 2016 26

D3 Animated Transitions Mike Bostock, 2011 27

Centroidal Voronoi Tesselation Dunne, 2015 28

NYT Campaign Connections NY Times, 2015 29

Bubble Cursors Grossman and Balakrishnan, 2005; Anand Kulkarni, 2010 30

Voronoi Cursors Mike Bostock, 2019 31

Navigation Google Maps, 2020 32

I N -C LASS E XERCISE 33

In-class activity: Zoom techniques experiment with zooming and panning easypz.io Michail Schwab PhD student Khoury Data Visualization 34

Queries and Filtering 35

Queries and Filtering Ben Fry, 2014 36

Queries and Filtering Kayak, 2020 37

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

I N -C LASS E XERCISE 39

MBTAVis: Excellent WPI course final project Barry & Card, 2014 40

In- Class Critique — MBTAVis 15m In- Class Critique — MBTAVis 41

Paper Prototyping Analitico, 2013; Rajkumar, 2017 42

Paper Prototyping Aaron Brako, 2016 43

Low Fidelity to High Fidelity CanvasFlip, 2016 44

Sketching of Interactivity Hennigs, 2013 45

Example Usability Test with a Paper Prototype BlueDuckLabs, 2010 46