Cursus informatie visualisatie - KU Leuven

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

2. Opdracht vorige week
• Individueel (spreadsheet & infovis):
• Per team:
• Slides op blog
• Blogpost over wat je geleerd hebt uit feedback en voorstellen
andere groepen
• Geïllustreerd scenario
• concreet
• verwerkte feedback
• 10 mins slot om te presenteren / 5 minuten feedback
2

3. http://blog.ebemunk.com/a-visual-look-at-2-million-chess-games/

4. Human Perception
4

5. Source: Katrien Verbert 5

6. Source: Katrien Verbert 6

7. A limited set of visual properties that are detected
- very rapidly (< 200 to 250 ms),
- accurately,
- with little effort,
- before focused attention
by the low-lever visual system on them.
Healey, C., & Enns, J. (2012). A7en8on and Visual Memory in Visualiza8on and Computer Graphics. IEEE Transac*ons on Visualiza*on
and Computer Graphics , 18 (7), 1170-1188.
Pre-attentive characteristics
Note that eye movements take at least 200 ms to initiate.
7

8. Pre-attentive characteristics
Find the red dot
<> Hue
Find the dot
<> shape
Find the red dot
conjunction
not pre-attentive
http://www.csc.ncsu.edu/faculty/healey/PP/
helps to spot differences in multi-element display
8

9. Pre-attentive characteristics
Line orientation Length, width Closure Size
Curvature Density, contrast Intersection 3D depth
Not all of them allow showing exact quantitative differences
Helps to spot differences in multi-element display
9
http://www.csc.ncsu.edu/faculty/healey/PP/

10. Data
- structure
time, hierarchy, network, 1D, 2D, nD, …
- questions
where, when, how often, …
- audience
domain & visualisation expertise, …
10

11. Questions (to get things going)
What is the average amount of students that bought the course book ?
What? When? How much? How often?
When did students start looking at the course material?
How much hours did Peter work on this assignment?
(Why did Peter have to redo his assignment?)
How often did Peter retake the course before he passed?
(why?)
11

12. 12
Visual mapping
Encode data characteristics into visual form
Each mark (point, line, area,…) represents a data element
Think about relationships between elements (position)
“Simplicity is the ultimate sophistication.”
Leonardo daVinci

13. J. Mackinlay. Automating the design of graphical presentations of relational information. ACM Transactions On Graphics, 5(2):110–141, 1986.
13

14. • hue: categorical
• saturation: ordinal and quantitative
• luminance: ordinal and quantitative
How to choose colors
source from: Katrien Verbert 14

15. http://colorbrewer2.org

16. Position
16

17. Position & color
http://time.com/12933/what-you-think-you-know-about-the-web-is-wrong/
17

18. X 4
How much bigger is the lower bar?
Slide adapted from Michael Porath & Katrien Verbert
Length
18

19. X 5
How much bigger is the right circle?
Slide adapted from Michael Porath & Katrien Verbert
Area
19

20. Apparent magnitude curves
http://makingmaps.net/2007/08/28/perceptual-scaling-of-map-symbols
Slide adapted from Michael Porath
20

21. Which one is more accurate?
Slide adapted from Michael Porath
21
Compensating magnitude to match perception

22. ?
22

23. 10 mins presentaties per
groep!
Feedback / meedenken is belangrijk

24. ?
24

25. Tegen volgende week
• Individueel:
• Spreadsheet
• infovis van de week:
• Relevante infovis (inhoud, techniek, etc) voor je eigen project. Wat leer je eruit?
• Per team:
• Slides online plaatsen
• Blogpost - wat geleerd uit feedback, hoe rekening houden ermee? prioritiseer en
maak planning
• Implementatie / data verzamelen
• Show & Tell - feedback per groep
• Focus op vragen over de data & de inzichten die je hoopt te winnen
25