Informatie-visualisatie

les 1, 9 feb 2015

Erik DuvalDept. Computerwetenschappen, KULeuvenhttp://erikduval.wordpress.com & @ErikDuval

1

2

http://www.slideshare.net/erik.duval

Human-Computer Interaction

technology enhanced learningmusicresearchpersonal healthdata journalism

3

http://datavislab.org4

Dank aan:

Katrien Verbert & Joris Klerkx(en het Internet)

5

Wie zijn jullie?Waarom zitten jullie hier?

6

• inzicht verwerven in de fundamenten van informatie-visualisatie en hoe je die kan toepassen

• inzicht verwerven in de toepassingsgebiedenvan informatie visualisatie

• concrete vaardigheden verwervenvoor het ontwerpen, implementeren en evalueren van toepassingen die steunen op informatie visualisatie

7

hoorcolleges…

8

• project-vak, geen examen (evt. bespreking)

• 9 studenten = 3 groepen van 3

• beoordeling: visualisatie & paper (“50-50”)

• inzicht & concrete vaardigheden

• ieder van jullie moet ontwerpen, programmeren en tekst schrijven!

9

4 stp = 120u = 9u/week = 6u buiten zitting!

10

laptop/tablet/gsm-met-internet?

11

toledo

blog + wiki + slack + spreadsheet

12

13

http://ariadne.cs.kuleuven.be/wiki/index.php/InfoVis-1414

14

15

zittingen: verplicht

16

voorbeelden?

17

18

T. Nagel, L. Pschetz, M. Stefaner, M. Halkia, and B. Müller. Mæve – An Interactive Tabletop Installation for Exploring Background Information in Exhibitions. Human-Computer Interaction. Ambient, Ubiquitous and Intelligent Interaction, Vol. 5612, LNCS, pages 483–491. 2009.

http://tillnagel.com/2011/10/interactive-exploration-of-geospatial-network-visualization/

Nagel, T., Duval, E., Vande Moere, A., Interactive Exploration of a Geospatial Network Visualization. CHI 2012, May 5-10, Austin, USA19

are just by visually looking for the largest number of con-nected nodes. These larger clusters can be a first indicationof where high profile authors are located. However, in thisstate, neither the names of the authors nor the titles of thepapers are visible yet.

When the user wants to look into more details, he can zoomin to a specific part of the publication space. This is whatFigure 3 depicts. The author names become clearly visible,so that the user can identify a particular author. The usercan also click on paper nodes to get more information on thepaper. To make it easier to identify which authors are moreprolific in the field, the node size of the author is directlyproportional to his number of publications. In Figure 3, forexample, author Martin Wolpers has the largest number ofpublications and is a good candidate to use as a landmarkin the exploration process.

4. EVALUATIONIn this section, we describe how we have evaluated our firstiteration. Subsections 4.1 and 4.2 elaborate on the setupof the evaluation. Subsection 4.3 discusses the results ofthe evaluation and finally, in subsection 4.4, we draw ourconclusions from this evaluation.

4.1 DescriptionTo evaluate the application, we deployed our tabletop in themain hall of the ECTEL 2010 conference [42]. This roomwas the main location for co�ee breaks and figure 4 illus-trates the tabletop setup.The evaluation was conceived as a formative evaluation, inorder to gather feedback on the design and implementationof the application from real users in a real life scenario. Wefollowed the think aloud method, where the participantsverbally describe their thoughts during the evaluation. Inthis way, the participants reveal their view on the systemand possibly their misconceptions [28]. It started o� withgeneral questions (age, gender, profession, vision and leftor right handed) about the participants together with theirbackgrounds. The participants were introduced to the ap-plication by asking them if they could explain what theysaw. We also asked them one basic content-related ques-tion to get them started: “Find author x and find out howmany papers he wrote in ECTEL 2007”. When needed, theparticipants were given extra explanation about the appli-cation. After this, the evaluation continued with tasks theyhad to perform. For each task, we noted whether the tasksucceeded, how fluently the task was performed and whetherthe participant needed help or not. Finally, the participantswere asked for some general feedback and they filled in asmall questionnaire about usefulness and ease of use. Eachevaluation took between 20 and 30 minutes.

4.2 ParticipantsThere was a total of 11 participants, aged between 27 and 60.All participants were researchers, right handed and all butone had corrected vision. Only 3 of the participants con-sidered that they had a bit of experience with multitouchinteraction, the other 8 said they had a lot of experience.Regarding experience towards tabletops or multitouch wallshowever, only one person described himself as experienced.To find out how experienced the participants were in the

Figure 4: Setting of the evaluation.

Figure 5: An overview of the number of papers theparticipants have written

research area, they were asked about their years of experi-ence in the Technology Enhanced Learning (TEL) researcharea, the number of papers published and how many of thempublished in TEL. Half of the participants claimed to haveup to 3 years of experience and the other half claimed tohave many years of experience. On average, the partici-pants have published around 32 papers, from which 16 inthe TEL area. Three participants have published more than60 papers, from which 20 or more in the TEL area. Fig-ure 5 shows in detail the number of published papers perparticipant.

4.3 ResultsIn this section, we describe the results of the evaluation.These results are grouped in three parts. First, we reporton the tasks the participants had to perform, second, wesummarize the most important feedback, and third, we takea look at the results from the questionnaire.

4.3.1 Tasks

20

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.

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.

21

22

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)

algorithm<>

human23

data mining<>

visual analytics24

number crunching<>

human perception25

self driving car<>

gps + dashboard26

27

http://www.popsci.com/cars/article/2013-09/google-self-driving-car

64 laser beams1 million measures/sec11cm resolutionnavmap for static objects

28

http://senseable.mit.edu/livesingapore/visualizations.html

29

T. Nagel, M. Maitan, E. Duval, A. Vande Moere, J. Klerkx, K. Kloeckl, and C. Ratti. Touching transport - a case study on visualizing metropolitan public transit on interactive tabletops. In AVI2014: 12th ACM International Working Conference on Advanced Visual Interfaces, pages 281–288, 2014. http://www.youtube.com/watch?v=wQpTM7ASc-w

30

?@ErikDuval  

h.p://erikduval.wordpress.com31

Information Visualisation is the use ofinteractive visual representations to amplify cognition

[Card. et. al]

32

Overview

Visualization

Slide  source:  John  Stasko

Scientific visualization

Information visualization

33

Information Visualisation

Concerned with data that does not have a well-defined representation in 2D or 3D space (i.e., “abstract data”)

Slide  source:  Robert  Putman 34

Scientific visualisation

Specifically concerned with data that has a well-defined representation in 2D or 3D space (e.g., from simulation mesh or scanner).

Slide  source:  Robert  Putman 35

Also: visual analytics

http://www.visual-­‐analytics.eu/faq/   36

Anscombe’s quartethttp://en.wikipedia.org/wiki/Anscombe's_quartet

37

Discover patterns in the data

38

Communicate data

World Population GrowthAt the dawn of agriculture, about 8000 B.C., the population of the world was approximately 5 million. Over the 8,000-year period up to 1 A.D. it grew to 200

million (some estimate 300 million or even 600, suggesting how imprecise population estimates of early historical periods can be), with a growth rate of under 0.05% per year. A tremendous change occurred with the industrial revolution: whereas it had taken all of human history until around 1800 for world population to reach one

billion, the second billion was achieved in only 130 years (1930), the third billion in less than 30 years (1959), the fourth billion in 15 years (1974), and the

fifth billion in only 13 years (1987). During the 20th century alone, the population in the world has grown from 1.65 billion to 6 billion.

39

Tell the story behind the data

Will there be enough food?

Communicate data

40

http

://w

ww.

foot

print

netw

ork.o

rg/e

n/ind

ex.ph

p/gfn

/pag

e/ea

rth_

over

shoo

t_da

y/

Facilitate human interaction for exploration and understanding

World Population Growthht

tp://

ww

w.bb

c.co.

uk/n

ews/w

orld

-153

9151

5

41

What are the stories behind the data?42

Empower users to make informed decisions43

Further Examples

http://infosthetics.com/

http://visualizing.org

http://www.visualcomplexity.com/vc/

http://visual.ly/

http://flowingdata.com

http://www.infovis-wiki.net

44

?@ErikDuval  

h.p://erikduval.wordpress.com45

D3.js

Joris Klerkx - @jkofmsk

http://d3js.org/

Data-Driven Documents

46

Intro tot...

47http://d3js.org/

What?

Bind arbitrary data do a Document Object Model (DOM)

Apply data-driven transformations to the DOM

48

AdvantagesWeb standards

HTML, SVG, CSS

All (modern) browsers & platforms

Well-known web technologiesjavascript, json, CSV, ...

Extensive API + exampleshttps://github.com/mbostock/d3/wiki/API-Reference

IE9, Chrome, FF, Safari, ... mobile, desktop

https://github.com/mbostock/d3/wiki/Gallery

49

Who knows? • HTML?

• CSS?

• http://www.w3schools.com/css/

• Javascript?

• http://www.w3schools.com/js/

• SVG?

• http://www.w3schools.com/svg/50

Look out

51

Quite a learning curve

Tools you need

• Text Editor or IDE

• Browser(s)

• Developer Tools - embedded in Chrome (or firebug in FF)

52

Further Reading

53

http://mbostock.github.com/d3

http://www.jeromecukier.net/blog/2012/09/04/getting-to-hello-world-with-d3/

http://christopheviau.com/d3_tutorial/

http://alignedleft.com/tutorials/d3/fundamentals/

...

If you find other resources, please share via slack!

tegen volgende week

• d3.js aanleren

• d3.js van spreadsheet als simpele case study

• blog opzetten en op slack aankondigen

• infovis van de week (digitaal/analoog, individueel, blog)

54

?@ErikDuval  

h.p://erikduval.wordpress.com55