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!