infovis1415: slides sessie 1, 10 feb 2015
TRANSCRIPT
![Page 1: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/1.jpg)
Informatie-visualisatie
les 1, 9 feb 2015
Erik DuvalDept. Computerwetenschappen, KULeuvenhttp://erikduval.wordpress.com & @ErikDuval
1
![Page 3: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/3.jpg)
Human-Computer Interaction
technology enhanced learningmusicresearchpersonal healthdata journalism
3
![Page 5: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/5.jpg)
Dank aan:
Katrien Verbert & Joris Klerkx(en het Internet)
5
![Page 6: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/6.jpg)
Wie zijn jullie?Waarom zitten jullie hier?
6
![Page 7: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/7.jpg)
• 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
![Page 8: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/8.jpg)
hoorcolleges…
8
![Page 9: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/9.jpg)
• 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
![Page 10: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/10.jpg)
4 stp = 120u = 9u/week = 6u buiten zitting!
10
![Page 11: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/11.jpg)
laptop/tablet/gsm-met-internet?
11
![Page 12: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/12.jpg)
toledo
blog + wiki + slack + spreadsheet
12
![Page 13: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/13.jpg)
13
http://ariadne.cs.kuleuven.be/wiki/index.php/InfoVis-1414
![Page 14: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/14.jpg)
14
![Page 15: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/15.jpg)
15
![Page 16: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/16.jpg)
zittingen: verplicht
16
![Page 17: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/17.jpg)
voorbeelden?
17
![Page 18: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/18.jpg)
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.
![Page 19: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/19.jpg)
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
![Page 20: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/20.jpg)
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.
![Page 21: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/21.jpg)
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
![Page 22: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/22.jpg)
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)
![Page 23: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/23.jpg)
algorithm<>
human23
![Page 24: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/24.jpg)
data mining<>
visual analytics24
![Page 25: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/25.jpg)
number crunching<>
human perception25
![Page 26: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/26.jpg)
self driving car<>
gps + dashboard26
![Page 27: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/27.jpg)
27
![Page 28: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/28.jpg)
http://www.popsci.com/cars/article/2013-09/google-self-driving-car
64 laser beams1 million measures/sec11cm resolutionnavmap for static objects
28
![Page 29: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/29.jpg)
http://senseable.mit.edu/livesingapore/visualizations.html
29
![Page 30: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/30.jpg)
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
![Page 31: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/31.jpg)
?@ErikDuval
h.p://erikduval.wordpress.com31
![Page 32: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/32.jpg)
Information Visualisation is the use ofinteractive visual representations to amplify cognition
[Card. et. al]
32
![Page 33: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/33.jpg)
Overview
Visualization
Slide source: John Stasko
Scientific visualization
Information visualization
33
![Page 34: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/34.jpg)
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
![Page 35: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/35.jpg)
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
![Page 36: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/36.jpg)
Also: visual analytics
http://www.visual-‐analytics.eu/faq/ 36
![Page 37: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/37.jpg)
Anscombe’s quartethttp://en.wikipedia.org/wiki/Anscombe's_quartet
37
![Page 38: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/38.jpg)
Discover patterns in the data
38
![Page 39: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/39.jpg)
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
![Page 40: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/40.jpg)
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/
![Page 41: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/41.jpg)
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
![Page 42: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/42.jpg)
What are the stories behind the data?42
![Page 43: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/43.jpg)
Empower users to make informed decisions43
![Page 44: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/44.jpg)
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
![Page 45: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/45.jpg)
?@ErikDuval
h.p://erikduval.wordpress.com45
![Page 46: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/46.jpg)
D3.js
Joris Klerkx - @jkofmsk
http://d3js.org/
Data-Driven Documents
46
Intro tot...
![Page 48: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/48.jpg)
What?
Bind arbitrary data do a Document Object Model (DOM)
Apply data-driven transformations to the DOM
48
![Page 49: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/49.jpg)
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
![Page 50: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/50.jpg)
Who knows? • HTML?
• CSS?
• http://www.w3schools.com/css/
• Javascript?
• http://www.w3schools.com/js/
• SVG?
• http://www.w3schools.com/svg/50
![Page 51: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/51.jpg)
Look out
51
Quite a learning curve
![Page 52: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/52.jpg)
Tools you need
• Text Editor or IDE
• Browser(s)
• Developer Tools - embedded in Chrome (or firebug in FF)
52
![Page 53: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/53.jpg)
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!
![Page 54: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/54.jpg)
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
![Page 55: InfoVis1415: slides sessie 1, 10 Feb 2015](https://reader034.vdocument.in/reader034/viewer/2022042701/55a64db31a28abef028b4800/html5/thumbnails/55.jpg)
?@ErikDuval
h.p://erikduval.wordpress.com55