Survey Result

1

Assignment II !Assignment II !

Nobody uploads till yesterday, difficult?

2

Last Week: Text Visualization

3

Interaction—— IV Course Spring’14

Graduate Coursef UCASof UCAS

April 4th, 2014

4

InfoVisP l

VisualizationPipeline

Interaction• Interaction

• Interaction

DataUser

• InteractionData • Interaction

5• Interaction

Outline• Definition

– From HCI/visualization researchers– Examples

• Taxonomyy– Many different ones– We will teach according to the latest:

[Heer & Shneiderman’12]

• Most of this course will be demos and videos!

6

Definition of “Interaction” •Interaction (HCI: Human-Computer Interaction) “Interaction”– in a sense previously reserved for describing a uniquely interpersonal activity – seems

i t l t h t i h t b t appropriately to characterize what goes on between people and certain machines as well. — Lucy Suchman, Plans and Situated ActionsPlans and Situated Actions “The communication between user and the system” [Dix et al., 1998] et al., 1998] “Direct manipulation and instantaneous change” [Becker et al., 1987] , ]

7

Importance of “Interaction” p

“The effectiveness of information visualization hinges t thi it bilit t l l d t l on two things: its ability to clearly and accurately

represent information and our ability to interact with it to figure out what the information means ” S Few it to figure out what the information means. S. Few, Now You See It, p. 55

8

Simple Examplep p

9http://www.meandeviation.com/dancing-histograms/

Essential Examplep

10

https://sketchfab.com/

Cool Examplep

h // kl d i i /

11

http://oakland.crimespotting.org/

Question?Q

Critique and improvement to the interactions (selection)? Critique and improvement to the interactions (selection)?

12

Potential Ones• Overview?

C i d ?• Comparison, trends?• Sorting?

13

Taxonomy of Interactionsy

I t ti T b Di d Elli (AVI ’98)• Interaction Types by Dix and Ellis (AVI ’98)　Highlighting and focus Accessing extra info – drill down and hyperlinks 　Overview and context – zooming and fisheyes Same representation, changing parameters 　Linking representations – temporal fusion

14

Taxonomy of Interactionsy

T b D K i (TVCG ’02)• Taxonomy by D. Keim (TVCG ’02): Projection Filtering Zooming Distortion Linking and brushing

15

Taxonomy of Interactionsy

T b W d G i t i K i (2010)• Taxonomy by Ward, Grinstein, Keim (2010) Operator

navigation, selection, manipulation, distortion, filtering Space of interaction

d l d ib bj i li i screen, data value, data structure, attribute, object, visualization structure Parameters of the interaction operator Parameters of the interaction operator

focus, extents, transformation, blender

16

Taxonomy of Interactionsy

T f F ’ b k (N it)• Taxonomy from Few’s book (Now you see it): Comparing Sorting Sorting Adding variables Filtering Highlighting Aggregating Re-expressing Re-visualizing Re visualizing Zooming and panning Re-scaling A i d il d d Accessing details on demand Annotating Bookmarking

17

g

Taxonomy of Interactionsy

T b Yi K St k (TVCG 2007)• Taxonomy by Yi, Kang, Stasko (TVCG 2007) Select Explore Reconfigure Encode Abstract/Elaborate Filter Connect

18

Taxonomy of InteractionsyWe will use the latest by Heer & Shneiderman

(“ D f l l “ 55(4) 45 54(“Interactive Dynamics for Visual Analysis“, 55(4): 45-54,Communications of the ACM, 2012)

19

Data & View Specification: Visualizep• Interactive Sales Data Charts

https://live.zoomdata.com/zoomdata/visualization?__target=embedded&key=52265abb6abdbcaa8c217789#51db7 d4 4b04 f9 b346db 51db7 d4 4b04 f9 b346d57ad4e4b04caf9ab346db-51db7ad4e4b04caf9ab346d5

• Tableau desktop

20

Data & View Specification: Filterp• Dynamic Query

Pioneer video demo by Ben Shneiderman@Maryland

Crime Map (Filter with Scented Bars)• Crime Map (Filter with Scented Bars)

N t k Vi li ti ith N d /Ed Filt21

• Network Visualization with Node/Edge Filters

Data & View Specification: Sortp• A simple bar chart sorting

http://bl.ocks.org/mbostock/3885705

• Fancy data table sortingFancy data table sorting

22

Data & View Specification: Sortp• True matrix sorting

http://bost.ocks.org/mike/miserables/

• ParallelCoordinate: sorting dimensions

23

Data & View Specification: Derivep• Tableau desktop

24

View Manipulation: Selectp• Point select• Range select• Highlighting• Highlightinghttp://mbostock.github.io/d3/talk/20111116/bundle.html

• Dragginghttp://bl.ocks.org/mbostock/4062045p g

• Brushinghttp://mbostock github io/d3/talk/20111116/iris splom htmlhttp://mbostock.github.io/d3/talk/20111116/iris-splom.htmlTableau Desktop

25

View Manipulation: Selectp• More sophisticated: TimeSearcher

26

Any problems with assignment II ?

27

Assignment II• Task: visualization design

–Design only one new and/or useful and/or interactive visualization over one data setover one data set.–Your visualization can contain multiple views–You can use Photoshop, Adobe Illustrator, Microsoft Paint, Visio, ..., p, , , , ,or even draw by hand if only the pictures are readable–Must have at least one class of target usersO l s t sk–One clear user task

–At least one useful interaction• What to hand in (in English)What to hand in (in English)

–A maximum of 5 pictures of the visualization–A text description of the data set, target user, user task, visual p , g , ,design/encoding and interactions of your visualization (< 1000 words, including captions)

28

Wiki Pageg• Prohibit Registration

Too many users in the wiki–Too many users in the wiki

•Assignment Protection•Assignment Protection–You can see but can not edit assignment page after the deadline–You can still hand in your homework after the deadlineYou can st ll hand n your homework after the deadl ne–If your assignment is finished and don’t need to be modified, Write “ultimate edition” at the bottom of your assignment page.

29

View Manipulation: Navigatep g• Information Seeking Mantra

Overview first, zoom and filter, then details-on-demand

• FanLens: expansible hierarchiesFanLens expansible hierarchies• DOI Tree: http://davenation.com/doitree/doitree-avi-2002.htm

30

View Manipulation: Navigatep g• DOI Tree: http://davenation.com/doitree/doitree-avi-2002.htm

31

View Manipulation: Navigatep g• Focus + Context interactions

1D menuFisheye distortion:http://bost.ocks.org/mike/fisheye/Hyperbolic treeypGoogle image

32

View Manipulation: Navigatep g• Overview + Detailhttp://designinginterfaces.com/firstedition/index.php?page=Overview_Plus_Detail

33

View Manipulation: Navigatep g• Overview + Detail

34

View Manipulation: Coordinatep• Improvise by C. Wave: video demo

35

View Manipulation: Coordinatep• SAVE System: video demo from 1:10

36

View Manipulation: Organizep g• Tableau desktop

37

Process & Provenance: Record• Tableau desktop

• GraphTrail

38

Process & Provenance: Annotate• Text visualization

39

Process & Provenance: Share• ManyEyes

40

Process & Provenance: Guide• Narrative visualization

41

Process & Provenance: Guide• Remember the GapMinder video

42

Process & Provenance: Guide• Storytelling visualization

43http://nyti.ms/sFYztk

Summaryy

D fi i i• Definition– From HCI/visualization researchers– Examples

• Taxonomyaxonomy– Many different ones– We teach according to the latest:– We teach according to the latest:

[Heer & Shneiderman’12]W h l t f d d id t • We have seen a lot of demos and videos, try to design yours (manually first)

44

Questions?Questions?

What’s Next -- Lecture 10: Network Visualization I

45