D3.js: Data Visualization for the Web
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

D3.js: Data Visualization for the Web

on

  • 1,250 views

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

Statistics

Views

Total Views
1,250
Views on SlideShare
1,243
Embed Views
7

Actions

Likes
0
Downloads
9
Comments
0

1 Embed 7

https://twitter.com 7

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

D3.js: Data Visualization for the Web Presentation 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!