Your SlideShare is downloading. ×
0
D3.js: DataVisualization
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...
Core concept : Data join
Data Elements
Enter Update Exit
http://bost.ocks.org/mike/join/
myData = [1,3,4];
join = data(myD...
CoreConcept:Layouts
myData = {‘nodes’: [
{‘name’:’a’},
{‘name’:’b’}],
‘egdes’:[
{‘source’:0,‘target:1}
]};
layout = layout...
References
Any questions?
Thanks for your attention!
Upcoming SlideShare
Loading in...5
×

D3.js: Data Visualization for the Web

1,015

Published on

Short talk about D3.js in #DataTuesday meetup, focus on #DataViz; on 17th September 2013

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,015
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "D3.js: Data Visualization for the Web "

  1. 1. D3.js: DataVisualization for the Web Óscar Marín Miró @outliers_es www.outliers.es
  2. 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. 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. 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. 5. References
  6. 6. Any questions? Thanks for your attention!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×