20160208 informatie visualisatie les 1

Informatie visualisatie: Les 1

Joris Klerkx - Erik Duval http://hci.cs.kuleuven.be joris.klerkx@cs.kuleuven.be

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

http://terror.periscopic.com

Shows patterns & triggers questions

46

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

http://www.visual-analytics.eu/faq

Also: Visual Analytics

60

?61

Pauze nodig? of eerder stoppen?

D3.js

Joris Klerkx - @jkofmsk

http://d3js.org/

Data-Driven Documents

Intro tot...

62

63http://d3js.org/

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