This document discusses interactive visualization and summarizes key points from an article on interactive dynamics for visual analysis. It outlines how interaction can support exploration of large datasets by enabling data and view specification, view manipulation, and recording analysis processes and provenance. Effective interactive visualizations allow users to explore data at their own pace, support overview first with zoom/filter capabilities, and facilitate comparison through coordinated/multiple linked views.

1. Informatie visualisatie:
Les 7
Joris Klerkx - Erik Duval
http://hci.cs.kuleuven.be
joris.klerkx@cs.kuleuven.be
Human-Computer Interaction
Dept. Computerwetenschappen
KU Leuven
1

2. 2

3. Spreadsheet!

4. Vandaag
• Interactie (ik)
• Show-and-Tell (jullie)
• Opdracht tegen volgende keer (ik)
4

5. When“static”visualizations are
not enough
Too many datapoints or variables
True understanding and insight generation require
interaction
Data is exploratory in nature
5

6. Interaction
Should contribute to successful analytic dialogues!
Support exploration at the rate of human thought!
6

7. Interactive Dynamics enables analysts
to explore large data sets (Task types)
Heer, J., & Shneiderman, B. (2012, February). Interac=ve Dynamics for Visual Analysis. Magazine Queue
- Microprocessors , 10 (2), p. 30. hHp://queue.acm.org/detail.cfm?id=2146416
• Data & View Specification controls
• View Manipulation
• Process & Provenance
7

8. Data & View
Specification
8

9. Custom programming of a specific visualization component
9
http://unfoldingmaps.org

10. google spreadsheets
Tools that use a chart typology (eg excel)
10

11. Excel for mac 2015
Tools that use a chart typology (eg excel)
11

12. http://www-969.ibm.com/software/analytics/manyeyes/
12

13. Cfr. http://gravyanecdote.com/visual-analytics/which-chart-should-you-use-to-show-this-data/
Data-flow graphs deconstruct the visualization process into fine-grained set of
operators (data import, transformation, layout, coloring, etc
13

14. View Manipulation
14

15. • Categorical/ordinal data
• radio buttons, checkboxes, scrollable lists,
hierachies, search boxes (with autocomplete)
• Ordinal, quantitative, and temporal data
• a standard slider (for a single threshold value) or a
range slider (for specifying multiple endpoints).
Filtering allows rapid and reversible
exploration of data subsets
15

16. Heer, J., & Shneiderman, B. (2012, February). Interac=ve Dynamics for Visual Analysis. Magazine Queue - Microprocessors , 10 (2), p.
30. hHp://queue.acm.org/detail.cfm?id=2146416
16

17. http://doug.cs.kuleuven.be/wittgenstein2/
17

18. http://localhost:63342/DataAnalysis/report/dre-userpaths_filters.html
18

19. http://www.trulia.com/vis/tru247/
Query controls can be further augmented with
visualizations of their own
19

20. Query controls can be further augmented with
visualizations of their own
20

21. Sorting enables popping up of
trends, clusters,…
• Choices in a toolbar
• Clicks on the header in a table
• Can be complicated in the case of multiple view
displays
21

22. http://terror.periscopic.com
22

23. https://augmenthuman.wordpress.com/portfolio/emotions-in-the-classroom/
23

24. Heer, J., & Shneiderman, B. (2012, February). Interac=ve Dynamics for Visual Analysis. Magazine Queue - Microprocessors , 10 (2), p.
30. hHp://queue.acm.org/detail.cfm?id=2146416
24

25. Select items to hightlight, filter or
manipulate them
• Mouse clicks, free-form lassos, area cursors
(‘brushes’), mouse hovering, etc
• depends on the device
• Various expressive power
• selections of a collection of items
• selections as queries over the data (eg drawing
rectangle -> range query)
25

26. 26
http://localhost:63342/DataAnalysis/report/dre-userpaths_filters.html

27. Select by slope and tolerance
Heer, J., & Shneiderman, B. (2012, February). Interac=ve Dynamics for Visual Analysis. Magazine Queue - Microprocessors , 10 (2), p.
30. hHp://queue.acm.org/detail.cfm?id=2146416 27

28. Mapping mouse gestures to query patterns
Heer, J., & Shneiderman, B. (2012, February). Interac=ve Dynamics for Visual Analysis. Magazine Queue - Microprocessors , 10 (2), p.
30. hHp://queue.acm.org/detail.cfm?id=2146416
28

29. Navigate to examine high-
mede patterns & low-level detail
• Overview first, zoom & filter, then details-on-demand
• Start with what you know, then grow
• Search, show context, expand on demand.
• Focus + Context
• Semantic Zooming
• Magical lenses
29

30. $
f con-
cation
n this
of the
zoom
what
isible,
e user
on the
more
rectly
3, for
ber of
dmark
Figure 4: Setting of the evaluation.
B. Vandeputte, E. Duval, and J. Klerkx. Interactive sensemaking in authorship networks. Proceedings of the ACM International
Conference on Interactive Tabletops and Surfaces, ITS11, pp. 246–247, 2011.
Overview first, zoom and filter, details on demand
30

31. B. Vandeputte, E. Duval, and J. Klerkx. Applying design principles in authorship networks-a case study. In CHI EA’12:
Proceedings of the 2012 ACM annual conference extended abstracts on Human Factors in Computing Systems, pages 741–
744, 2012. (https://www.youtube.com/watch?v=R5CeTEejdBA)
Start with what you know, then grow
Search, show context, expand on demand
31

32. http://sanfrancisco.crimespotting.org
Overview first, zoom and filter, details on demand
Viewport on the data: zooming & panning controls
32

33. Focus+context
Large hierarchies
https://philogb.github.io/jit/static/v20/Jit/Examples/Hypertree/example1.html
Limited screen space
33

34. http://resources.arcfmsolution.com/2.4/SilverlightUsing/Toolbar.html

35. Focus + Context
Semantic Zooming
Heer, J., & Shneiderman, B. (2012, February). Interac=ve Dynamics for Visual Analysis. Magazine Queue - Microprocessors , 10 (2), p.
30. hHp://queue.acm.org/detail.cfm?id=2146416 35

36. Magical Lenses
C. Tominski, S. Gladisch, U. Kister, R. Dachselt, and H. Schumann. A Survey on Interactive Lenses in Visualization. EuroVis State-of-the-Art Reports, Swansea, UK, Eurographics
Association, 2014.
36

37. Fisheye
37

38. C. Tominski, S. Gladisch, U. Kister, R. Dachselt, and H. Schumann. A Survey on Interactive Lenses in
Visualization. EuroVis State-of-the-Art Reports, Swansea, UK, Eurographics Association, 2014.
38

39. Coordinate views for linked, multi-
dimensional exploration
Enables seeing data from different perspectives
Multiple views can facilitate comparison
39

40. http://square.github.io/crossfilter/40

41. https://perswww.kuleuven.be/~u0074988/mapc/
https://augmenthuman.wordpress.com/portfolio/mapc_interactive_dashboard/
41

42. Small multiples provide multiple perspectives
https://queue.acm.org/detail.cfm?id=2146416
Heer, J., & Shneiderman, B. (2012, February). Interac=ve Dynamics for Visual Analysis. Magazine Queue - Microprocessors , 10 (2), p.
30. hHp://queue.acm.org/detail.cfm?id=2146416
42

43. Heer, J., & Shneiderman, B. (2012, February). Interac=ve Dynamics for Visual Analysis. Magazine Queue - Microprocessors , 10 (2), p.
30. hHp://queue.acm.org/detail.cfm?id=2146416 43

44. https://augmenthuman.wordpress.com/portfolio/an-interactive-visualization-of-butterfly-observations/
https://www.youtube.com/watch?v=NvqJi8NwLCI 44

45. Organize multiple windows & workspaces
• Tiled approaches (different widgets) allows to see
all information and selectors at once, minimizing
distracting scrolling or window operations, while
enabling analysts to concentrate on extracting and
reporting insights.
• Layout organization tools will become decisive
factors in creating effective user experience
45

46. Orchestrate attention and mentally integrate patterns among views
Heer, J., & Shneiderman, B. (2012, February). Interac=ve Dynamics for Visual Analysis. Magazine Queue - Microprocessors , 10 (2), p.
30. hHp://queue.acm.org/detail.cfm?id=2146416
46

47. Orchestrating visualizations over various devices
47

48. In-class display
48

50. Process & Provenance
50

51. Record analysis histories for
revisitation, review and sharing
51

52. Heer, J., & Shneiderman, B. (2012, February). Interac=ve Dynamics for Visual Analysis. Magazine Queue - Microprocessors , 10 (2), p. 30. hHp://queue.acm.org/detail.cfm?id=2146416
52

53. Heer, J., & Shneiderman, B. (2012, February). Interac=ve Dynamics for Visual Analysis. Magazine Queue - Microprocessors , 10 (2), p.
30. hHp://queue.acm.org/detail.cfm?id=2146416 53

54. Annotate patterns to document
findings
Record, organize, and communicate insights gained
during visual exploration
54

55. Freeform graphical annotations without explicit tie to the
underlying data
Data-aware annotations
Heer, J., & Shneiderman, B. (2012, February). Interac=ve Dynamics for Visual Analysis. Magazine Queue - Microprocessors , 10 (2), p.
30. hHp://queue.acm.org/detail.cfm?id=2146416
55

56. 56

57. Share views and annotations to
enable collaboration
Real-world analysis is very much a social process
that may involve multiple interpretations,
discussion, and dissemination of results.
57

58. https://www.youtube.com/watch?v=g91_EBxVh3E
58

59. Heer, J., & Shneiderman, B. (2012, February). Interac=ve Dynamics for Visual Analysis. Magazine Queue - Microprocessors , 10 (2), p.
30. hHp://queue.acm.org/detail.cfm?id=2146416 59

60. Guide users through analysis tasks or
stories
• Incorporate guided analytics to lead analysts
through workflows for common tasks.
• Narrative visualization
60

61. Heer, J., & Shneiderman, B. (2012, February). Interac=ve Dynamics for Visual Analysis. Magazine Queue - Microprocessors , 10 (2), p.
30. hHp://queue.acm.org/detail.cfm?id=2146416
61

62. Artikel - tekst
Visualisatie
Narrative
visualization
62

63. Interval 1 Interval 2 Interval 3 Interval 4
63

64. Interactive Dynamics: Summary
Heer, J., & Shneiderman, B. (2012, February). Interac=ve Dynamics for Visual Analysis. Magazine
Queue - Microprocessors , 10 (2), p. 30. hHp://queue.acm.org/detail.cfm?id=2146416
64

65. Humans have advanced perceptual abilities
Humans have little short term memory
Externalize data by using interactive, visual encodings
Our brains makes us extremely good at recognizing visual patterns
Our brains remember relatively little of what we perceive
65

66. ?
66

67. Uit eerste les…
67

68. Beoordeling:
• Visualisatie & paper (“50-50”)
• Feedback aan andere groepjes in studio-sessies
• Belangrijk is blijk te geven van inzicht & concrete vaardigheden
https://onderwijsaanbod.kuleuven.be/2015/syllabi/n/H04I2AN.htm
68

69. Paper
69

70. Paper
• doel en doelpubliek
• dataset: oorsprong, eigenschappen, …
• verwant werk, web & literatuur
• visualisatie en interactie
• eventueel: opeenvolgende versies
• belangrijkste ontwerp-beslissingen (!)
• Discussie/outro: wat zou je anders doen, wat zou je extra doen
als je tijd had, wat heb je geleerd, …
• besluit
70

71. http://www.sigchi.org/publications/chipubform
71

72. Paper
• max 8 pages
• max is niet min!
• incl. referenties, figuren, enz.
• (ook
• youtube (2-4 min) met voice-over
• max 10 screenshots)
• tussentijdse versies voor feedback
72

73. Tegen volgende les
(11 april)
• Individueel:
• Spreadsheet
• infovis van de “week”
• Team:
• Vervolg implementatie
• Blog post -> wat geleerd vandaag en hoe kan je dat
terugkoppelen naar project?
• Show-and-Tell - obv online visualisatie
• Wat kan je eruit afleiden?
• vooruitgang - problemen - planning - etc.
• Draft paper
73