View
306
Download
2
Category
Tags:
Preview:
Citation preview
Informatie-visualisatie
les 1, 9 feb 2015
Erik DuvalDept. Computerwetenschappen, KULeuvenhttp://erikduval.wordpress.com & @ErikDuval
1
Human-Computer Interaction
technology enhanced learningmusicresearchpersonal healthdata journalism
3
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
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...
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
Recommended