data visualisation with d3
TRANSCRIPT
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