Embed Size (px)
Citation preview
Informatie visualisatie: Les 1
Joris Klerkx - Erik Duval http://hci.cs.kuleuven.be [email protected]
Human-Computer InteractionDept. ComputerwetenschappenKU Leuven
To research, design, create and evaluate useful tools that augment the human intellect
By ‘augmen+nghuman intellect’ we mean increasing the capability of a mantoapproacha complex problem situa+on, to gain comprehension to suit his particular needs, and toderive solu+onstoproblems(DouglasEngelbart,1962).
2
Augment group - HCI research lab Dept. ComputerwetenschappenKU Leuvenhttps://augmenthuman.wordpress.com
Music
Technology Enhanced Learning
e-health
Research 2.0
HealthMedia
(Consumption)
Technology Enhanced Learning
Science 2.0
http://eng.kuleuven.be/datavislab/3
https://erikduval.wordpress.com/4
Waarom zitten jullie hier? Wat verwachten jullie?
5
• inzicht verwerven in de fundamenten van informatie-visualisatie en hoe je die kan toepassen
• inzicht verwerven in de toepassingsgebiedenvan informatie visualisatie
• concrete vaardigheden verwerven voor het ontwerpen, implementeren en evalueren van toepassingen die steunen op informatie visualisatie
6
hoorcolleges…
7
Zittingen: verplicht
8
• Project-vak, geen examen (evt. bespreking)
• 20 studenten = 6 groepen van 3 & 1 groep van 2
• ieder van jullie moet ontwerpen, programmeren en tekst schrijven!
9
Beoordeling:
• Visualisatie & paper (“50-50”)
• Feedback aan andere groepjes in studio-sessies
• Belangrijk is blijk te geven van inzicht & concrete vaardigheden
https://onderwijsaanbod.kuleuven.be/2015/syllabi/n/H04I2AN.htm
http://stefanpante.github.io/infovis/
Projecten - voorbeelden
http://datachartists.blogspot.be
https://infovislvm.wordpress.com
Paper
4 stp= 120u= 9u/week= 6u buiten zitting!
16
17
BYOD
toledo
blog + wiki + slack + spreadsheet
18
Leeromgeving
http://augment.cs.kuleuven.be/wiki/index.php/InfoVis-1516
19
20
21
Spreadsheet vorig academiejaar
22
?23
Team vorming, wiki & spreadsheet!
http://augment.cs.kuleuven.be/wiki/index.php/InfoVis-1516
Why visualisation ?
24
DATA ABUNDANCE - BIG DATA
25
+/- 40% of world population26
millions of records
“Tall” data
Multi-variate data with 100s to 1000s of variables
“Wide” data
How to create value from of such data?
29
How to generate insights from this data?
30
How to facilitate human interaction for exploration with and understanding of data?
31
32Source: Andrew Vande Moere
algorithm<>
human
33
http://www.demorgen.be/dm/nl/5403/Internet/article/detail/1890428/2014/05/18/Twitteractiviteit-verraadt-je-politieke-profiel.dhtml
number crunching
<>human
perception
35
self driving car<>
gps + dashboard
36
37
Why visualisation ?
38
Anscombe`s quartet http://en.wikipedia.org/wiki/Anscombe's_quartet
Enables discovery of visual patterns in data sets
Graphics reveal data (Tufte, 2001)
39
World Population GrowthA 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.
Seeing is understanding40
http://www.informationisbeautiful.net/visualizations/how-many-gigatons-of-co2/
Tells stories
41
http://www.hearts.com/ecolife/cut-paper-consumption-protect-forests/
Seeing = understanding
42
Facilitates understandinghttp://www.bbc.co.uk/news/world-15391515
43
Facilitates human interaction for exploration and understanding
http://www.bbc.co.uk/news/world-15391515
44
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
Facilitates human interaction for exploration and understanding45
Interactivity allows comparison
47
http://blog.stephenwolfram.com/2012/03/the-personal-analytics-of-my-life/
Shows trends & anomalies in the data, therefore triggers questions48
Helps to find stories, see trends
BelgiumBrazil
USA
India
49
Sentiment analysis in enterprise social network (slack)
Shows patterns
50
Sentiment analysis in enterprise social network (slack)
Triggers questions & creates awareness
Should we trust SOTA NLP-algorithms?
51
Empowers users to make informed decisions
Positive Badges
Negative Badges
52
Khaled Bachour, Frederic Kaplan, Pierre Dillenbourg, "An Interactive Table for Supporting Participation Balance in Face-to-Face Collaborative Learning," IEEE Transactions on Learning Technologies, vol. 3, no. 3, pp. 203-213, July-September, 2010
Creates awareness
53
http://infosthetics.com/
http://visualizing.orghttp://www.visualcomplexity.com/vc/
http://visual.ly/
http://flowingdata.comhttp://www.infovis-wiki.net
54
Defining visualisation
55
Information Visualisation is the use of interactive visual representations to amplify cognition [Card. et. al]
Definition
56
Visualization
Slidesource:JohnStasko
Scientific visualization
Information visualization
57
Information Visualisation
Concerned with data that does not have a well-defined representation in 2D or 3D space (i.e., “abstract data”)
Slidesource:RobertPutman 58
Scientific visualisation
Specifically concerned with data that has a well-defined representation in 2D or 3D space (e.g., from simulation mesh or scanner).
Slidesource:RobertPutman 59
?61
Pauze nodig? of eerder stoppen?
D3.js
Joris Klerkx - @jkofmsk
http://d3js.org/
Data-Driven Documents
Intro tot...
62
What?
Bind arbitrary data do a Document Object Model (DOM)
Apply data-driven transformations to the DOM
64
From data.. to interactive visualisations
[4, 8, 15, 16, 23, 42];
function(d) { return d3.time.days(new Date(2012, 0, 1), new Date(2013, 0, 1));
})
name,economy (mpg),cylinders,displacement (cc),power (hp),weight (lb),0-60 mph (s),yearAMC Ambassador Brougham,13,8,360,175,3821,11,73AMC Ambassador DPL,15,8,390,190,3850,8.5,70AMC Ambassador SST,17,8,304,150,3672,11.5,72AMC Concord DL 6,20.2,6,232,90,3265,18.2,79AMC Concord DL,18.1,6,258,120,3410,15.1,78AMC Concord DL,23,4,151,,3035,20.5,82AMC Concord,19.4,6,232,90,3210,17.2,78AMC Concord,24.3,4,151,90,3003,20.1,80
CSV
{ "employees": [ { "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName":"Jones" } ] }
JSON 65
javascript
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
66
Who knows? • HTML?
• CSS?
• http://www.w3schools.com/css/
• Javascript?
• http://www.w3schools.com/js/
• SVG?
• http://www.w3schools.com/svg/67
Tools you need
• Text Editor or IDE
• Browser(s)
• Developer Tools - embedded in Chrome (or firebug in FF)
68
Look out
69
Quite a steep learning curve
Further Reading
70
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!
?71
Praktisch vraagje
Woensdagen 10:30-12:30?
Tegen volgende week• Individueel:
• d3.js aanleren
• d3.js van spreadsheet als simpele case study
• kort presenteren in volgende sessie
• Spreadsheet aanvullen
• Per team:
• blog opzetten en op slack aankondigen
• Wiki pagina aanvullen
• Infovis van de week posten op blog
• (digitaal/analoog, individueel)
?74
