information visualisation (multimedia 2009 course)

Information VisualisationMultimedia

25 - 09 - 2009

Joris Klerkxjoris.klerkx@cs.kuleuven.be

1

2

Information Visualisatie

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

3

Information Visualisatie

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

3

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

Information Visualisation

A B

C

DE

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

Information Visualisation

A B

C

DE

“A picture is worth a 1000 words...”

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

Information Visualisation

5

Use Human Perceptual System

Pattern recognition

scan, recognize, remember

Graphical elements facilitate comparisons

length, shape, orientation, texture, color

Animation

time changes

The Visualisation Pipeline

6

The Visualisation Pipeline

6

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?

7

[Van Wijk, 2006], [Spoerri, 2004]

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

[IEEE LTSC LOM, 2002]

Learning Object Metadata

9

[IEEE LTSC LOM, 2002]

Learning Object Metadata

9

[IEEE LTSC LOM, 2002]

Learning Object Metadata

9

Tree-map AlgorithmAriadne Classification

Exact Sciences

Informatics Physics

Human Sciences

10

Tree-map AlgorithmAriadne Classification

Exact Sciences

Informatics Physics

Human Sciences

Ariadne Classification

10

Tree-map AlgorithmAriadne Classification

Exact Sciences

Informatics Physics

Human Sciences

Ariadne Classification

Exact Sciences

10

Tree-map AlgorithmAriadne Classification

Exact Sciences

Informatics Physics

Human Sciences

Ariadne Classification

Exact Sciences Human Sciences

10

Tree-map AlgorithmAriadne Classification

Exact Sciences

Informatics Physics

Human Sciences

Ariadne Classification

Exact Sciences Human Sciences

Informatics

Physics

10

Access to the Ariadne KPS

11

Exact SciencesHuman

Sciences

12

Access to the Ariadne KPS

12

Access to the Ariadne KPS

12

Access to the Ariadne KPS

12

Overview first, Zoom and Filter, then Details on Demand“Visual Information-Seeking Mantra” [Shneiderman, 1996]

Access to the Ariadne KPS

12

Overview first, Zoom and Filter, then Details on Demand“Visual Information-Seeking Mantra” [Shneiderman, 1996]

Access to the Ariadne KPS

12

Overview first, Zoom and Filter, then Details on Demand“Visual Information-Seeking Mantra” [Shneiderman, 1996]

Access to the Ariadne KPS

Access to Ariadne KPS: Demo

13

Access to Ariadne KPS: Demo

13

Prototype Evaluation

14

Prototype EvaluationStudy 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

Prototype EvaluationStudy 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

Prototype EvaluationStudy 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

Visual Information Seeking

Overview

Zoom

Filter

Details-on-Demand

Relate

History & Extract

15

CS2: Eurosong 2009 Results

http://blob.creanode.com/blob/eu2009/

Visualisation for analysis16

CS3: EC-TEL Proceedings

Visualisation of concepts17

Music Industry

bron: http://en.wikipedia.org/wiki/Music_industry18

CS4: Visualising ReuseStudy 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

Reuse?

Repository filled with 48286 components from 653 presentations:

14113 slides5768 images198 tables26 diagrams27543 text fragments

20

Reuse?

Repository filled with 48286 components from 653 presentations:

14113 slides5768 images198 tables26 diagrams27543 text fragments

20

➡ Average reuse-value: 0.22

Reuse?

Repository filled with 48286 components from 653 presentations:

14113 slides5768 images198 tables26 diagrams27543 text fragments

20

➡ Average reuse-value: 0.22

Access to ALOCOM: Demo

21

Access to ALOCOM: Demo

21

Access to ALOCOM: Demo

21

Evaluation

22

Evaluation

Expert review

4 expert users in TEL community

prototype = effective & efficient

22

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

CS5: http://www.liveplasma.com/

Visualisation for recommendation 23

CS6: Visualising Social BookmarksStudy 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

Clustermap Algorithm

25

Clustermap Algorithm

25

Clustermap Algorithm

25

Clustermap Algorithm

25

Clustermap Algorithm

25

Clustermap Algorithm

25

Access to del.icio.us: Demo

Selection Widget

Empty Visualisation:

“Start with what you know, then grow”

Filters

Results

26

Access to del.icio.us: Demo

26

Prototype Evaluation

27

Prototype EvaluationStudy 1: Expert review by 4 experts

portal integration, zooming, learning curve, complexity, timeline integration

27

Prototype EvaluationStudy 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

CS7: Many Eyes: Visualisation for the masses

http://manyeyes.alphaworks.ibm.com/manyeyes/visualizations/finding-new-music-artists-takes-time

Visualisation for recommendation 28

CS8: Visualising a Network of LORS

29

CS8: Visualising a Network of LORS

Unlock the deep web of the learning repository networks that members of GLOBE maintain [Globe, 2008]

29

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

Find Material: Demo

30

Find Material: Demo

30

Timeline Visualisation of History: Demo

31

Timeline Visualisation of History: Demo

31

CS9: Listening History

32

http://www.leebyron.com/what/lastfm/example.jpg

CS10: Emotion in Lyrics

HAPPY ANGRY

SURPRISEFEAR

SADNESS DISGUSThttp://www.synesketch.krcadinac.com/

Integrated Karaoke Player with Synesketch

On-the-fly visualisation of lyrics during Song.

33

Thriller, Michael Jackson

34

Thriller, Michael Jackson

34

Shiny Happy People, REM

35

Shiny Happy People, REM

35

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=64436

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=64437

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

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

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

Thanks

Questions?

41