This document provides an overview of D3.js, a JavaScript library for visualizing data in web browsers. It was created in 2011 by Mike Bostock and uses HTML, SVG, and CSS standards to bind interactive graphics to web page documents. D3.js has a steep learning curve but is well-suited for creating interactive and dynamic data visualizations on the web that can adapt to different devices in real-time. It works by joining data to graphical elements using enter, update, and exit operations and provides layouts to organize nodes and edges in network graphs.

1. D3.js: DataVisualization
for the Web
Óscar Marín Miró
@outliers_es
www.outliers.es

2. 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

3. 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

4. CoreConcept:Layouts
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

5. References

6. Any questions?
Thanks for your attention!