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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Playing with d3.js

  • 2,614 views
Published

 

Published in Technology , Art & Photos
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,614
On SlideShare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
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