Informatie visualisatie: Les 2

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

Human-Computer InteractionDept. ComputerwetenschappenKU Leuven

1

Opdracht vorige 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)

2

Spreadsheet

15/02/2015 - 12u3

Infovis vd week

VISUALEYESGROUP Joren Sigert Wander

The Tufters Yannick B Yannick L Yves

InfoFish Sus Vincent Maxim

Ex Machina Tom Wietse Eline

The Info Mob Glenn Carmen Birgit

Game of Simplicity Gert-Jan Sebastiaan Michael

Postgraduwhat Max Wouter Evert

INNOV8 Matteus Victor Jean-Baptise

15/02/2015 - 14u134

Leuke posts!

5

https://postgraduwhatblog.wordpress.com/2016/02/13/infovis-van-de-week-1-wouter/

Sterfgevallen in boeken - Game of Thrones

6

D3.js?

7

Guidelines & Facts

8

How many circles?

9

Humans have advanced perceptual abilitiesOur brains makes us extremely good at recognizing visual patterns

10

11

Humans have little short term memoryOur brain remembers relatively little of what we perceive.

https://www.youtube.com/watch?v=IGQmdoK_ZfY&gl=BE

http://dl.acm.org/citation.cfm?id=30067912

Visual Information Seeking Mantra

https://www.youtube.com/watch?v=og7bzN0DhpI (9:51 - 11:22 )13

http://www.bbc.com/future/bespoke/20140724-flight-risk/

Overview first, zoom & filter, details-on-demand

14

http://infovis-lvm.github.io

Overview first, zoom & filter, details-on-demand

15

Real data is ugly and needs to be cleaned

http

://hc

il2.c

s.um

d.ed

u/tr

s/20

11-3

4/20

11-3

4.pd

f

http://www.netmagazine.com/features/seven-dirty-secrets-data-visualisationhttps://code.google.com/p/google-refine/

http://vis.stanford.edu/wrangler/Pre-process your data

16

http://nieuws.vtm.be/verkiezingen/gemeente?province=P1&city=G73

Always check & pre-process your data

17

Verkiezingen 14/10/12

Forget about 3D graphs (on a 2D screen..)

Occlusion Complex to interact with Doesn’t add anything to the data

18

Source: Stephen Few

What if we need to add a 3rd variable?

19

Use small coordinated graphs to add variables

20

Forget about 3D graphs (on a 2D screen)

Source: Stephen Few

Which student has more blogposts?

• Size & angle are difficult to compare• Without labels & legends, impossible to show exact quantitative

differences• Limited Short term (visual) memory

21

Source: Stephen Few

Save the pies for dessert (S. Few)

Try using either of the pies to put the slices in order by size

22

deredactie.be

demorgen.be

vtm.be

Verkiezingen 14/10/12

23

Obviously there are exceptions to the rule (1/2)

24http://themetapicture.com/the-sunny-side-of-the-pyramid/

Obviously there are exceptions to the rule (2/2)

25

0"

5"

10"

15"

20"

25"

30"

blogposts" tweets" comments"on"blogs"

reports"submi6ed"

Student'1'

Student"1"

0" 5" 10" 15" 20" 25" 30"

blogposts"

comments"on"blogs"

tweets"

reports"submi6ed"

Student'1'

Student"1"

Use Common Sense

0"

5"

10"

15"

20"

25"

30"

blogposts" comments"on"blogs"

tweets" reports"submi6ed"

Student'1'

Student"1"

26

0" 10" 20" 30" 40" 50" 60"

Student"1"

Student"2"

Student"3"

Student"4"

blogposts"

tweets"

comments"on"blogs"

reports"submi:ed"

0%# 20%# 40%# 60%# 80%# 100%#

Student#1#

Student#2#

Student#3#

Student#4#

blogposts#

tweets#

comments#on#blogs#

reports#submi;ed#

Use Common Sense

What are you comparing?What story do you get from it?

27

Which graph makes it easier to focus on the pattern of change through time, instead of the individual values?

Choose graph that answers your questions about your data28Source: Stephen Few

vtm.be

deredactie.be

nieuwsblad.be

Verkiezingen 14/10/12

Communicate the correct story

29

Don’t use visualisations to mislead

30

Don’t use visualisations to mislead

31

Source: Stephen Few 32

Source: Stephen Few 33

34

?35

EXERCISEFind all possible ways to visualize a

small data set of two numbers { 75, 37 }

36

http://blog.visual.ly/45-ways-to-communicate-two-quantities/37

https://medium.com/accurat-studio/sketching-with-data-opens-the-mind-s-eye-92d78554565

38

?39

Practicum opdracht

40

Maak eeninteractieve visualisatie van gegevens of informatiemet toegevoegde waarde

41

publiek?doel?data?

42

data?- http://www.onderwijskiezer.be/v2/hoger/hoger_studierendement.php - http://nl.soccerway.com/national/belgium/pro-league/20142015/regular-season/r25415/ - http://www.programmableweb.com/apis/directory - http://lak.linkededucation.org - http://academic.research.microsoft.com/About/Help.htm - http://labs.europeana.eu - http://quantifiedself.com/2014/10/qs-access-app-see-healthkit-data-table/ - https://dev.twitter.com/rest/public - http://opendata.antwerpen.be - https://developer.spotify.com/web-api/ - http://developer.echonest.com/docs/v4

and so on, and so on, and so on…

43

Audience vs purpose

Explore Explain

Lay person

Domain experts ? ?

? ?

44

Explore

Data insights: a visualization (Gregor Aisch)

Explain

http://deredactie.be/cm/vrtnieuws/grafiek/interactief/1.2248561

http://ariadne.cs.kuleuven.be/wiki/index.php/MM-Course1314 47

http

s://w

ww.

yout

ube.

com

/wat

ch?v

=ynR

rGR

r5k9

0#t=

29

48

http

s://m

umep

eg.w

ordp

ress

.com

/201

3/12

/12/

upda

te-v

isua

lisat

ion/

rang

efilte

rsiz

echa

nge/

#mai

n

49

Tegen volgende week• Individueel:

• Spreadsheet aanvullen

• Infovis van de week

• Per team:

• Blogpost - oefening 75 - 37 ( scan met visualisaties/ wat geleerd)

• Publiek - Data - Verhaal

• Data - ruwe feasibility (eg omvang/formaat/etc. )

• Visuele alternatieven (sketches)

• 10 minuten slot om te presenteren / 5 minuten feedback

50

?51