Introduction to information visualisation (Multimedia course)

1. Information Visualisation
Multimedia
25 - 09 - 2009
Joris Klerkx
joris.klerkx@cs.kuleuven.be
1

2. 2

3. Information Visualisatie
... is the use of interactive visual representations of
abstract data to amplify cognition. [Card et al.]
3

4. Information Visualisatie
... is the use of interactive visual representations of
abstract data to amplify cognition. [Card et al.]
3

5. Information Visualisation
Let A, B, C, D, E be natural persons,
departments of universities, states, etc.
• A is positively affected by B and affects
B, C and E positively.
• B is affected by A and C positively and
affects D negatively and A positively.
• C is positively affected by A, negatively
affected by E, and affects B positively.
• B and E negatively affect D.
• E affects C and D negatively and is
positively affected by A.
What’s going on?
4

6. Information Visualisation
Let A, B, C, D, E be natural persons,
departments of universities, states, etc. A B
• A is positively affected by B and affects
B, C and E positively.
• B is affected by A and C positively and
affects D negatively and A positively.
• C is positively affected by A, negatively
affected by E, and affects B positively.
C
• B and E negatively affect D.
• E affects C and D negatively and is
positively affected by A.
What’s going on?
E D
4

7. Information Visualisation
Let A, B, C, D, E be natural persons,
departments of universities, states, etc. A B
• A is positively affected by B and affects
B, C and E positively.
• B is affected by A and C positively and
affects D negatively and A positively.
• C is positively affected by A, negatively
affected by E, and affects B positively.
C
• B and E negatively affect D.
• E affects C and D negatively and is
positively affected by A.
What’s going on?
E D
“A picture is worth a 1000 words...”
4

8. Use Human Perceptual System
Pattern recognition
scan, recognize, remember
Graphical elements facilitate comparisons
length, shape, orientation, texture, color
Animation
time changes
5

9. The Visualisation Pipeline
6

10. The Visualisation Pipeline
6

11. Issues
How to provide efficient and effective access to large
collections of data
to enable insight in the contents of such a collection.
using information visualisation techniques
Does it work better?
[Van Wijk, 2006], [Spoerri, 2004]
7

12. CS1: Visualising a LOR
Study LOM [IEEE LOM, 2002]
start from Topic of LO [France et al., 1999], [Najjar, 2008a]
Study existing information visualisation techniques
Tree-map visualisation [Shneiderman and Johnson, 1991], [Shneiderman, 1996], [Lamping
and Rao, 1996], [Venn, 1880], [Kobsa, 2004], [Wang et al., 2006], [Rivadeneira and Bederson,
2003], [Bruls et al., 2000], etc.
Design & practical creation of an exploratory search
application
Evaluation
8

13. Learning Object Metadata
[IEEE LTSC LOM, 2002] 9

14. Learning Object Metadata
[IEEE LTSC LOM, 2002] 9

15. Learning Object Metadata
[IEEE LTSC LOM, 2002] 9

16. Tree-map Algorithm
Ariadne Classification
Exact Sciences Human Sciences
Informatics Physics
10

17. Tree-map Algorithm
Ariadne Classification
Exact Sciences Human Sciences
Ariadne Classification
Informatics Physics
10

18. Tree-map Algorithm
Ariadne Classification
Exact Sciences Human Sciences
Ariadne Classification
Informatics Physics
Exact Sciences
10

19. Tree-map Algorithm
Ariadne Classification
Exact Sciences Human Sciences
Ariadne Classification
Informatics Physics
Exact Sciences Human Sciences
10

20. Tree-map Algorithm
Ariadne Classification
Exact Sciences Human Sciences
Ariadne Classification
Informatics Physics
Exact Sciences Human Sciences
Informatics
Physics
10

21. Access to the Ariadne KPS
Human
Exact Sciences
Sciences
11

22. Access to the Ariadne KPS
12

23. Access to the Ariadne KPS
12

24. Access to the Ariadne KPS
12

25. Access to the Ariadne KPS
Overview first, Zoom and Filter, then Details on Demand
“Visual Information-Seeking Mantra” [Shneiderman, 1996] 12

26. Access to the Ariadne KPS
Overview first, Zoom and Filter, then Details on Demand
“Visual Information-Seeking Mantra” [Shneiderman, 1996] 12

27. Access to the Ariadne KPS
Overview first, Zoom and Filter, then Details on Demand
“Visual Information-Seeking Mantra” [Shneiderman, 1996] 12

28. Access to Ariadne KPS: Demo
13

29. Access to Ariadne KPS: Demo
13

30. Prototype Evaluation
14

31. Prototype Evaluation
Study 1: Perception of 1 infovis expert user [Nielsen, 1992b]
7 user tasks to support Exploratory Search [Shneiderman, 1996]
overview, zoom, filter, details-on-demand, relate, history, extract
14

32. Prototype Evaluation
Study 1: Perception of 1 infovis expert user [Nielsen, 1992b]
7 user tasks to support Exploratory Search [Shneiderman, 1996]
overview, zoom, filter, details-on-demand, relate, history, extract
Study 2: User Study [Rubin, 1994], [Nielsen, 1992a], [Likert, 1932], [Najjar et al., 2005],
10 users, 2 groups of 5, independent tasks
comparison traditional tool (SILO) and Prototype
Task time, Task Accuracy, Satisfaction (Likert Scale)
14

33. Prototype Evaluation
Study 1: Perception of 1 infovis expert user [Nielsen, 1992b]
7 user tasks to support Exploratory Search [Shneiderman, 1996]
overview, zoom, filter, details-on-demand, relate, history, extract
Study 2: User Study [Rubin, 1994], [Nielsen, 1992a], [Likert, 1932], [Najjar et al., 2005],
10 users, 2 groups of 5, independent tasks
comparison traditional tool (SILO) and Prototype
Task time, Task Accuracy, Satisfaction (Likert Scale)
14

34. Visual Information Seeking
Overview
Zoom
Filter
Details-on-Demand
Relate
History & Extract
15

35. CS2: Eurosong 2009 Results
http://blob.creanode.com/
blob/eu2009/
Visualisation for analysis 16

36. CS3: EC-TEL Proceedings
Visualisation of concepts 17

37. Music Industry
bron: http://en.wikipedia.org/wiki/Music_industry
18

38. CS4: Visualising Reuse
Study ALOCOM [Verbert et al., 2005]
isPartOf/hasPart relations
Study existing information visualisation techniques
Node-link graph [Ware and Franck, 1994], [Becker et al., 1995], [Shneiderman, 1996]
Design & practical creation of an exploratory search
application with advanced support to
Gain insight in actual reuse of the different components
Search & Find relevant components
Evaluation
19

39. Reuse?
Repository filled with 48286 components from 653
presentations:
14113 slides
5768 images
198 tables
26 diagrams
27543 text fragments
20

40. Reuse?
Repository filled with 48286 components from 653
presentations:
14113 slides
5768 images
198 tables
26 diagrams
27543 text fragments
➡ Average reuse-value: 0.22
20

41. Reuse?
Repository filled with 48286 components from 653
presentations:
14113 slides
5768 images
198 tables
26 diagrams
27543 text fragments
➡ Average reuse-value: 0.22
20

42. Access to ALOCOM: Demo
21

43. Access to ALOCOM: Demo
21

44. Access to ALOCOM: Demo
21

45. Evaluation
22

46. Evaluation
Expert review
4 expert users in TEL community
prototype = effective & efficient
22

47. Evaluation
Expert review
4 expert users in TEL community
prototype = effective & efficient
Recommendations
calculate statistics, social network of authors, reuse
through time, other dynamic controls, generalise target
group
22

48. CS5: http://www.liveplasma.com/
Visualisation for recommendation 23

49. CS6: Visualising Social Bookmarks
Study social bookmarks & metadata
del.icio.us [delicious, 2008], CALIBRATE [CALIBRATE, 2008]
Investigate existing information visualisation techniques
Cluster map [Fluit et al., 2005], [Dodge and Kitchin, 2001], [Pampalk, 2006], [Heer and
Boyd, 2005]...
Design & practical creation of an exploratory search
application with advanced support to
provide understanding in bookmarks, tags, users and the relationships
between them
Evaluation
24

50. Clustermap Algorithm
25

51. Clustermap Algorithm
25

52. Clustermap Algorithm
25

53. Clustermap Algorithm
25

54. Clustermap Algorithm
25

55. Clustermap Algorithm
25

56. Access to del.icio.us: Demo
Filters
Empty Visualisation:
Selection
Widget “Start with what
you know, then grow” Results
26

57. Access to del.icio.us: Demo
26

58. Prototype Evaluation
27

59. Prototype Evaluation
Study 1: Expert review by 4 experts
portal integration, zooming, learning curve, complexity, timeline integration
27

60. Prototype Evaluation
Study 1: Expert review by 4 experts
portal integration, zooming, learning curve, complexity, timeline integration
Study 2: Subjective review by 10 end users to assess
effectiveness
efficiency
subjective acceptance
usability issues
27

61. CS7: Many Eyes: Visualisation for the masses
http://manyeyes.alphaworks.ibm.com/manyeyes/visualizations/finding-
new-music-artists-takes-time
Visualisation for recommendation 28

62. CS8: Visualising a Network of LORS
29

63. CS8: Visualising a Network of LORS
Unlock the deep web of the learning repository
networks that members of GLOBE maintain [Globe, 2008]
29

64. CS8: Visualising a Network of LORS
Unlock the deep web of the learning repository
networks that members of GLOBE maintain [Globe, 2008]
Timeline Visualisation of Search History
29

65. Find Material: Demo
30

66. Find Material: Demo
30

67. Timeline Visualisation of History: Demo
31

68. Timeline Visualisation of History: Demo
31

69. CS9: Listening History
http://www.leebyron.com/what/lastfm/example.jpg
32

70. CS10:
Emotion in
HAPPY ANGRY
Lyrics
Integrated Karaoke Player
with Synesketch
On-the-fly visualisation of FEAR SURPRISE
lyrics during Song.
SADNESS DISGUST
http://www.synesketch.krcadinac.com/ 33

71. Thriller, Michael Jackson
34

72. Thriller, Michael Jackson
34

73. Shiny Happy People, REM
35

74. Shiny Happy People, REM
35

75. Information Visualization
Manifesto (1/2)
“The purpose is insight, not pictures” (Sheiderman)
“Form Follows Function”
“Start with a Question”
“Interactivity is Key”
“Cite your source”
http://www.visualcomplexity.com/vc/blog/?p=644
36

76. Information Visualization
Manifesto (2/2)
“The power of Narrative”
“Do not glorify Aesthetics”
“Look for Relevancy”
“Embrace Time”
“Aspire for Knowledge”
“Avoid gratuitous visualizations”
http://www.visualcomplexity.com/vc/blog/?p=644
37

77. Pointers
http://wearecolorblind.com/articles/quick-tips/
http://visualizingmusic.com/
http://infosthetics.com/
http://www.visualcomplexity.com/vc/
http://bestario.org/research/remap
http://visualthinkmap.blogspot.com/
http://www.infovis.net/
38

78. Libraries
http://wiki.okfn.org/OpenVisualisation
http://flare.prefuse.org/
http://iv.slis.indiana.edu/sw/
http://abeautifulwww.com/2008/09/08/20-useful-
visualization-libraries/
etc.
39

79. Further Readings
“Readings in Information Visualization: Using Vision to
Think”, Card, S et al
“Show Me the Numbers”, Few, S.
“Beautiful Evidence”, Tufte, E.
“Information Visualization. Perception for design”, Ware,
C.
etc.
40

80. Thanks
Questions?
41