data visualisation with d3

http://www.datastory.ch@datastory_ch

Data visualisation with D3Webmardi

Catherine Pugin

Fribourg, 05.05.2015

Florian Evéquoz

2

Data everywhere…

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

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

5http://thepoliticsofsystems.net/2012/10/the-guardians-facebook-page-as-a-network/

6See http://en.wikipedia.org/wiki/William_Playfair

7

Se

e h

ttp

://e

n.w

ikip

ed

ia.o

rg/w

iki/J

oh

n_

Sn

ow

_%

28

ph

ysic

ian

%2

9

8See http://en.wikipedia.org/wiki/Charles_Joseph_Minard

9

http

://w

ww

.scm

p.co

m/in

fogr

aphi

cs/a

rtic

le/1

2846

83/ir

aqs-

bloo

dy-t

oll

• 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 ?

Per capita income

Colleg

e d

eg

ree %

«Information visualization is useful only for complex data»

Are you sure ?

14

D3 DATA-DRIVEN DOCUMENTS

Webmardi – Data visualisation and 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

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()…

17

D3 - examples

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

18

D3 - examples

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

19

D3 - examples

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

20

D3 - examples

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

21

D3 - examples

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

22

Ready?...

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

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

25

Results (1)

• 74 parliamantarians published 1565 original tweets.

26

Results (2) - CSV

-

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

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

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

"Conseil"

27

Results (3) – Viz

28

Our target for today

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

29

viz.html – just a container

30

viz.js – svg and data variables

31

D3.csv• Loads a CSV file asynchronously…

• … and converts it into a Javascript array

32

viz.js – load and clean data

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.

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*

35

viz.js – draw circles for tweets?

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…

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/

38

viz.js – define scales

viz.js – draw circles for tweets

39

Result in the DOM

40

41

View intermediate result

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

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

viz.js - axes

43

Result in the DOM

44

style.css – axes styling

45

46

View our final result

http://localhost:8888/viz.html

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

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

There’s (a lot) more to D3

• Layouts• Geographical

projections• Color

manipulation• Geometry

utilities• …

48

49

And next…

50

Let’s keep in touch

{catherine,florian,datastory}@datastory.ch