Interaction

CS 7250 SPRING 2020 Prof. Cody Dunne NORTHEASTERN UNIVERSITY

Slides and inspiration from Michelle Borkin, Krzysztof Gajos, , Miriah Meyer, Jonathan Schwabish, and David Sprague 1 BURNING QUESTIONS?

2 PREVIOUSLY, ON CS 7250…

3 Color Vocabulary and Perceptual Ordering

Darkness (Lightness)

Saturation

Hue ? ?

Based on Slides by Miriah Meyer, 4 “Simultaneous Contrast”

Avoid gradients as backgrounds or bars!

5 NOW, ON CS 7250…

6 ONE LAST ILLUSION…

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 INTERACTION

15 GOALS FOR TODAY

• 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.” - “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 , 2020 32 IN-CLASS EXERCISE

33 In-class activity: experiment with Zoom techniques zooming and panning easypz.io

Michail Schwab PhD student Khoury Data

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 IN-CLASS EXERCISE

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