Upload
outliers-collective
View
931
Download
1
Embed Size (px)
DESCRIPTION
Short talk about D3.js in #DataTuesday meetup, focus on #DataViz; on 17th September 2013
Citation preview
D3.js: Data Visualization for the Web
Óscar Marín Miró@outliers_es
www.outliers.es
D3.js - An Overview
‣D3 : “Data-driven Documents”‣Javascript library‣Over HTML5 standards‣Steep learning curve
Technical features
Good for‣Web Interactivity‣Multi-device‣Real-time, ‘plastic’ data
Not-so-good for‣Desktop apps‣Static charts‣Fast prototyping
http://en.wikipedia.org/wiki/D3.js
2011, Mike Bostock
Core concept : Data join
Data Elements
Enter Update Exit
http://bost.ocks.org/mike/join/
myData = [1,3,4];join = data(myData,”svg:circle”);join.enter().attr(radius,datum);join.exit().remove();join.update().attr(radius,datum);
Pseudo-code
Cor
e C
once
pt: L
ayou
ts
myData = {‘nodes’: [{‘name’:’a’},{‘name’:’b’}],
‘egdes’:[{‘source’:0,‘target:1}]};
layout = layout(‘network’,‘myData’);
print layout;
myData = {‘nodes’: [ {‘name’:’a’,’x’:0,y:1}, {‘name’:’b’,’x’:1,y:0}, ‘egdes’:[{‘source’:0,‘target:1}]};
Pseudo-code
References
Any questions?Thanks for your attention!