data visualisation with d3

50
http:// www.datastory.ch @datastory_ch Data visualisation with D3 Webmardi Catherine Pugin Fribourg, 05.05.2015 Florian Evéquoz

Upload: florian-evequoz

Post on 07-Aug-2015

140 views

Category:

Education


0 download

TRANSCRIPT

Page 1: Data visualisation with D3

http://www.datastory.ch@datastory_ch

Data visualisation with D3Webmardi

Catherine Pugin

Fribourg, 05.05.2015

Florian Evéquoz

Page 2: Data visualisation with D3

2

Data everywhere…

Page 3: Data visualisation with D3

3

Datastory

• Founded in 2014• 4 partners with competencies in

– Data modeling– Data mining– Data analysis– Data visualisation

• Custom solutions in data analysis and visualisation

Page 4: Data visualisation with D3

4

Outline

• Data visualisation : foundations– Some historical examples

• D3– Introduction– Use case: Twitter and the Swiss

parliament• Methodology• Results and comments• Step-by-step D3

Page 9: Data visualisation with D3

9

http

://w

ww

.scm

p.co

m/in

fogr

aphi

cs/a

rtic

le/1

2846

83/ir

aqs-

bloo

dy-t

oll

Page 10: Data visualisation with D3

• Visualization can be used to rapidly make sense of complex data

• Example :– Which state has the

highest income per capita ?

– Is there a relationship between income and college degrees ?

Page 11: Data visualisation with D3

Per capita income

Colleg

e d

eg

ree %

Page 12: Data visualisation with D3

«Information visualization is useful only for complex data»

Are you sure ?

Page 13: Data visualisation with D3
Page 14: Data visualisation with D3

14

D3 DATA-DRIVEN DOCUMENTS

Webmardi – Data visualisation and D3

Page 15: Data visualisation with D3

15

Data-driven Documents – D3.js

• JavaScript library for manipulating documents based on data

• Relies on HTML5, SVG, and CSS

• Based on data-driven DOM manipulation

• Contains powerful low-level visualisation components

• Requires recent and efficient browsers

Page 16: Data visualisation with D3

16

Data-driven Documents – D3.js

• What D3 is not– Not a graphical framework like Raphael– Not a chart library like Highcharts– Not an compatibility layer like JQuery

• As a consequence, D3 does not include high-level visualisation primitives like pie(), plot(), bar(), line()…

Page 17: Data visualisation with D3

17

D3 - examples

http://bl.ocks.org/Caged/6476579

Page 18: Data visualisation with D3

18

D3 - examples

http://bl.ocks.org/mbostock/4062045

Page 19: Data visualisation with D3

19

D3 - examples

http://bl.ocks.org/mbostock/10024231

Page 20: Data visualisation with D3

20

D3 - examples

http://bost.ocks.org/mike/uberdata/

Page 21: Data visualisation with D3

21

D3 - examples

http://www.nytimes.com/newsgraphics/2013/09/07/director-star-chart/

Page 22: Data visualisation with D3

22

Ready?...

Page 23: Data visualisation with D3

23

Use Case: Twitter and the Swiss Parliament• Methodology

1. Find all parliamantarians accounts100 / 246

2. Define the periodSpring session (3 weeks)

3. Define metricspopularity : # RTs + # Favoritesvisibility : # followers + # RT

followers

Page 24: Data visualisation with D3

24

Tools

• Twitter4j APIGet all information about tweets published during the given period by the given group of users

• KNIMEAnalysis of the data and production of the CSV file in the predefined format

• D3Visualisation

Page 25: Data visualisation with D3

25

Results (1)

• 74 parliamantarians published 1565 original tweets.

Page 26: Data visualisation with D3

26

Results (2) - CSV

-

"id","user","date","text","retweetedstatus","retweets",

"favorites", "hashtags","followers","reach",

"Nom Prénom","Parti","Langue","Canton",

"Conseil"

Page 27: Data visualisation with D3

27

Results (3) – Viz

Page 28: Data visualisation with D3

28

Our target for today

https://github.com/evequozf/d3-tuto-twitter

Page 29: Data visualisation with D3

29

viz.html – just a container

Page 30: Data visualisation with D3

30

viz.js – svg and data variables

Page 31: Data visualisation with D3

31

D3.csv• Loads a CSV file asynchronously…

• … and converts it into a Javascript array

Page 32: Data visualisation with D3

32

viz.js – load and clean data

Page 33: Data visualisation with D3

33

D3.filter

selection.filter(selector)Filters the selection, returning a new selection that contains only the elements for which the specified selector is true.

Page 34: Data visualisation with D3

34

Now, bind tweet data to DOM elements

• For each tweet in our data, we want to draw an SVG <circle> with

cx = *time of tweet*cy = *visibility of tweet*r = *popularity of

tweet*

• It should by styled, toofill = *parti*stroke = *parti*

Page 35: Data visualisation with D3

35

viz.js – draw circles for tweets?

Page 36: Data visualisation with D3

36

What’s the problem?

• d.date is between [Mon Mar 02 2015 00:09:20 GMT+0100 (CET), Fri Mar 20 2015 21:59:09 GMT+0100 (CET)]

• cx must be a value within our svg width of 960 pixels

• the same holds for other fields…

Page 37: Data visualisation with D3

37

D3 scales

• Scales in D3 are functions that encapsulate the mapping of values – from a specific domain (data)– to a specific range (visual encoding of data)– given a specific mapping function (linear,

log, time, ordinal, …)

http

://w

ww

.jero

me

cuki

er.n

et/b

log/

2011

/08/

11/d

3-sc

ales

-an

d-co

lor/

Page 38: Data visualisation with D3

38

viz.js – define scales

Page 39: Data visualisation with D3

viz.js – draw circles for tweets

39

Page 40: Data visualisation with D3

Result in the DOM

40

Page 41: Data visualisation with D3

41

View intermediate result

http://localhost:8888/viz-step0.html

Page 42: Data visualisation with D3

42

D3 axes

• D3 provides helper functions to draw axes of charts

• Result is predefined SVG elements put in the DOM, that can by styled independently

Page 43: Data visualisation with D3

viz.js - axes

43

Page 44: Data visualisation with D3

Result in the DOM

44

Page 45: Data visualisation with D3

style.css – axes styling

45

Page 46: Data visualisation with D3

46

View our final result

http://localhost:8888/viz.html

Get the code used in this tutorialhttps://github.com/evequozf/d3-tuto-twitter

Page 47: Data visualisation with D3

Published visualisation

• Contains additionnal elements– Widgets to filter the data– Tooltip– Zoom on time range– Legend– Log scales– Better colors– Pigeons

• http://www.datastory.ch/ef2015/viz.html

47

Page 48: Data visualisation with D3

There’s (a lot) more to D3

• Layouts• Geographical

projections• Color

manipulation• Geometry

utilities• …

48

Page 49: Data visualisation with D3

49

And next…

Page 50: Data visualisation with D3

50

Let’s keep in touch

{catherine,florian,datastory}@datastory.ch