D3.js: Data Visualization for the Web

  • 905 views
Uploaded on

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

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

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
905
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
11
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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!