This document provides an overview of an information visualization course, including its goals, structure, and topics. The course aims to provide insight into fundamentals and applications of information visualization and teach concrete skills for designing, implementing, and evaluating visualization applications. It will include lectures, a project in groups of 3 students, and examples of visualizations using techniques like D3.js.

1. Informatie-visualisatie
les 1, 9 feb 2015
Erik Duval
Dept. Computerwetenschappen, KULeuven
http://erikduval.wordpress.com & @ErikDuval
1

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

3. Human-Computer Interaction
technology enhanced learning
music
research
personal health
data journalism
3

4. http://datavislab.org
4

5. Dank aan:
KatrienVerbert & Joris Klerkx
(en het Internet)
5

6. Wie zijn jullie?
Waarom zitten jullie hier?
6

7. • inzicht verwerven in
de fundamenten van informatie-visualisatie
en hoe je die kan toepassen
• inzicht verwerven in
de toepassingsgebieden
van informatie visualisatie
• concrete vaardigheden verwerven
voor het ontwerpen, implementeren en evalueren
van toepassingen die steunen op informatie visualisatie
7

8. hoorcolleges…
8

9. • 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

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

11. laptop/tablet/gsm-met-internet?
11

12. toledo
blog + wiki + slack + spreadsheet
12

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

14. 14

15. 15

16. zittingen: verplicht
16

17. voorbeelden?
17

18. 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.

19. 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

20. Figure 4: Setting of the evaluation.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.

21. 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. 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)

23. algorithm
<>
human
23

24. data mining
<>
visual analytics
24

25. number crunching
<>
human perception
25

26. self driving car
<>
gps + dashboard
26

27. 27

28. http://www.popsci.com/cars/article/2013-09/google-self-driving-car
64 laser beams
1 million measures/sec
11cm resolution
navmap for static objects
28

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

30. 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 AdvancedVisual Interfaces, pages 281–288, 2014.
http://www.youtube.com/watch?v=wQpTM7ASc-w
30

31. ?
@ErikDuval
h.p://erikduval.wordpress.com
31

32. Information Visualisation is
the use of
interactive visual representations
to amplify cognition
[Card. et. al]
32

33. Overview
Visualization
Slide
source:
John
Stasko
Scientific
visualization
Information
visualization
33

34. InformationVisualisation
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

35. 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

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

37. Anscombe’s quartet
http://en.wikipedia.org/wiki/Anscombe's_quartet
37

38. Discover patterns in the data
38

39. Communicate data
World Population Growth
At 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

40. Tell the story behind the data
Will there be enough food?
Communicate data
40
http://www.footprintnetwork.org/en/index.php/gfn/page/earth_overshoot_day/

41. Facilitate human interaction for exploration and understanding
World Population Growth
http://www.bbc.co.uk/news/world-15391515
41

42. What are the stories behind the data?
42

43. Empower users to make informed decisions43

44. 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

45. ?
@ErikDuval
h.p://erikduval.wordpress.com
45

46. D3.js
Joris Klerkx - @jkofmsk
http://d3js.org/
Data-Driven Documents
46
Intro tot...

47. 47
http://d3js.org/

48. What?
Bind arbitrary data do a
Document Object Model (DOM)
Apply data-driven
transformations to the DOM
48

49. Advantages
Web standards
HTML, SVG, CSS
All (modern) browsers & platforms
Well-known web technologies
javascript, json, CSV, ...
Extensive API + examples
https://github.com/mbostock/d3/wiki/API-Reference
IE9, Chrome, FF, Safari, ... mobile, desktop
https://github.com/mbostock/d3/wiki/Gallery
49

50. Who knows?
• HTML?
• CSS?
• http://www.w3schools.com/css/
• Javascript?
• http://www.w3schools.com/js/
• SVG?
• http://www.w3schools.com/svg/50

51. Look out
51
Quite a learning curve

52. Tools you need
• Text Editor or IDE
• Browser(s)
• Developer Tools - embedded in Chrome
(or firebug in FF)
52

53. 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!

54. 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

55. ?
@ErikDuval
h.p://erikduval.wordpress.com
55