D3.js: Data Visualization for the Web
1 like1,897 views
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 of 6
Downloaded 24 times
![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](https://image.slidesharecdn.com/datatuesdaydatavizd3-130917071855-phpapp01/85/D3-js-Data-Visualization-for-the-Web-3-320.jpg)
![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](https://image.slidesharecdn.com/datatuesdaydatavizd3-130917071855-phpapp01/85/D3-js-Data-Visualization-for-the-Web-4-320.jpg)
More Related Content
What's hot (19)
Ad
Viewers also liked (6)
Ad
Similar to D3.js: Data Visualization for the Web (20)
More from Outliers Collective (20)
Recently uploaded (20)
D3.js: Data Visualization for the Web
- 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!