Your SlideShare is downloading. ×
0
Playing with d3.js
Playing with d3.js
Playing with d3.js
Playing with d3.js
Playing with d3.js
Playing with d3.js
Playing with d3.js
Playing with d3.js
Playing with d3.js
Playing with d3.js
Playing with d3.js
Playing with d3.js
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Playing with d3.js

2,709

Published on

Published in: Technology, Art & Photos
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,709
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
39
Comments
0
Likes
3
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. Playing with d3.js Ida Wang [email_address] 2011-12-21 [WoFoss]
  • 2. Agenda
    • What is d3.js?
    • Why d3?
      • (example show)
    • Environment
      • (Getting started)
    • Reference
  • 3. What is d3.js?
    • Data-Driven Documents (by Michael Bostock)
      • It is a library for manipulating HTML based on data.
      • Free, lightweight JavaScript library, it’s like jQuery and others javascript framework
      • D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document.
      • It’s a new visualization library to build visualizations in SVG.
      • It can be used to visualise data using HTML or SVG, and supports interactivity and animations.
  • 4.
    • Three Little Circles.
    • Once upon a time,
    • there were three little circles…
  • 5. Why d3?
    • The community is very responsive.
    • Source code is very clean.
    • API is well written.
    • they are very good introductions and you can find plenty of examples packaged with the source code or hidden in forums.
    • Visualization of data non Flash.
    • Funny!
  • 6.
    • DEMO
  • 7. Environment
    • d3.js libraries
    • Your favorite Browser
      • (supports CSS3 & HTML5)
    • Your favorite editor.
    • Full of
  • 8.
    • Getting started.
  • 9. example 1 <html> <head> <script src= &quot;../d3.js&quot; ></script> </head> <body> <div class= &quot;chart&quot; id= &quot;chart&quot; ></div> <script> var data = [2, 16, 28, 25, 29]; // set raw data var chart = d3.select(&quot;#chart&quot;); chart.style(&quot;width&quot;, 300) // set object range style .style(&quot;text-align&quot;,&quot;right&quot;) .style(&quot;border&quot;, &quot;3px&quot;) .style(&quot;border-style&quot;, &quot;solid&quot;) .style(&quot;border-color&quot;, &quot;pink&quot;);   chart.selectAll(&quot;div&quot;) // set all items bind data and style .data(data) .enter() .append(&quot;div&quot;) .text( function (item) { return item; }) .style(&quot;width&quot;, function (item) { return item * 10 + &quot;px&quot;; }) .style(&quot;background-color&quot;, &quot;steelblue&quot;) .style(&quot;color&quot;, &quot;white&quot;) .style(&quot;margin&quot;, &quot;1.5px&quot;); </script> </body> </html>  
  • 10. example 2 <html> <head> <script type= &quot;text/javascript&quot; src= &quot;../d3.js&quot; ></script> </head> <body> <div id= 'viz' ></div> <div id= 'haha' ></div> <script> var sampleSVG = d3.select(&quot;#viz&quot;) .append(&quot;svg:svg&quot;) .style(&quot;width&quot;, &quot;200px&quot;) .style(&quot;height&quot;, &quot;200px&quot;) .style(&quot;border-style&quot;,&quot;solid&quot;) .style(&quot;border-color&quot;,&quot;steelblue&quot;);   sampleSVG.append(&quot;svg:circle&quot;) .style(&quot;stroke&quot;, &quot;deeppink&quot;) .style(&quot;stroke-width&quot;, &quot;3px&quot;) .style(&quot;fill&quot;, &quot;steelblue&quot;) .attr(&quot;r&quot;, 40) // r : circle's radius. .attr(&quot;cx&quot;, 50) // cx: x-axis center of the circle .attr(&quot;cy&quot;, 50) // cy: y-axis center of the circle .transition() // start to change #viz’s style .delay(200) // wait (1/1000 second) .duration(1000) // duration to change the style (1/1000sec) .attr(&quot;r&quot;, 10) // r : circle's radius. .attr(&quot;cx&quot;, 185) // cx: x-axis center of the circle .attr(&quot;cy&quot;,185) // cy: y-axis center of the circle .style(&quot;fill&quot;, &quot;pink&quot;) .transition() .delay(1000) .duration(1000); </script> </body> </html>
  • 11. Reference
    • Overview - http://mbostock.github.com/d3/
    • library - https://github.com/mbostock/d3/archives/master
    • API Reference1 - http://mbostock.github.com/d3/api/
    • API Reference2 - https://github.com/mbostock/d3/wiki/
    • protovis - http://mbostock.github.com/protovis/
    • community - https://groups.google.com/forum/#!forum/d3-js
    • What is Method_chaining? - http://en.wikipedia.org/wiki/Method_chaining
    • What is DOM? (W3C) - Document Object Model (DOM) Technical Reports
    • What is SVG? - http://www.w3schools.com/svg/svg_intro.asp
    • others funny implement
    • http://www.dotblogs.com.tw/ajun/archive/2011/11/07/53832.aspx
    • Lots of Tutorial about D3 - http://www.janwillemtulp.com/category/d3/
    • Interview on Fell In Love With Data - http://fellinlovewithdata.com/guides/tftp-jan-willem-d3-protovis
    • d3.js, log.io, Buzz - http://dailyjs.com/2011/07/08/d3-logio/
    • D3.js is Not a Graphing Library, Let's Design a Line Graph - http://dealloc.me/2011/06/24/d3-is-not-a-graphing-library.html
    • Building a Tree Diagram in D3.js - http://blog.pixelingene.com/2011/07/building-a-tree-diagram-in-d3-js/
    • Try D3 Now - http://christopheviau.com/d3_tutorial/
    • Useful JavaScript and jQuery Tools, Libraries, Plugins - http://coding.smashingmagazine.com/2011/04/07/useful-javascript-and-jquery-tools-libraries-plugins/ What's a good real-time data visualization framework? - http://www.quora.com/What-s-a-good-real-time-data-visualization-framework
    • 20 Fresh JavaScript Data Visualization Libraries – http://sixrevisions.com/javascript/20-fresh-javascript-data-visualization-libraries/
    • Ida’s practice- http://omg3q9527.appspot.com/test01.jsp
  • 12.
    • Thank you

×