Playing with d3.js Ida Wang [email_address] 2011-12-21 [WoFoss]
Agenda <ul><li>What is d3.js? </li></ul><ul><li>Why d3? </li></ul><ul><ul><li>(example show) </li></ul></ul><ul><li>Enviro...
What is d3.js? <ul><li>Data-Driven Documents (by Michael Bostock) </li></ul><ul><ul><li>It is a library for manipulating H...
<ul><li>Three Little Circles. </li></ul><ul><li>Once upon a time,  </li></ul><ul><li>there were three little circles… </li...
Why d3? <ul><li>The community is very responsive. </li></ul><ul><li>Source code is very clean. </li></ul><ul><li>API is we...
<ul><li>DEMO </li></ul>
Environment <ul><li>d3.js libraries </li></ul><ul><li>Your favorite Browser  </li></ul><ul><ul><li>(supports CSS3 & HTML5)...
<ul><li>Getting started. </li></ul>
example 1 <html> <head> <script src= &quot;../d3.js&quot; ></script> </head> <body> <div class= &quot;chart&quot;  id= &qu...
example 2 <html> <head> <script type= &quot;text/javascript&quot;  src= &quot;../d3.js&quot; ></script> </head> <body> <di...
Reference <ul><li>Overview -  http://mbostock.github.com/d3/ </li></ul><ul><li>library -  https://github.com/mbostock/d3/a...
<ul><li>Thank you </li></ul>
Upcoming SlideShare
Loading in...5
×

Playing with d3.js

2,778

Published on

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

No Downloads
Views
Total Views
2,778
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
40
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Playing with d3.js"

  1. 1. Playing with d3.js Ida Wang [email_address] 2011-12-21 [WoFoss]
  2. 2. Agenda <ul><li>What is d3.js? </li></ul><ul><li>Why d3? </li></ul><ul><ul><li>(example show) </li></ul></ul><ul><li>Environment </li></ul><ul><ul><li>(Getting started) </li></ul></ul><ul><li>Reference </li></ul>
  3. 3. What is d3.js? <ul><li>Data-Driven Documents (by Michael Bostock) </li></ul><ul><ul><li>It is a library for manipulating HTML based on data. </li></ul></ul><ul><ul><li>Free, lightweight JavaScript library, it’s like jQuery and others javascript framework </li></ul></ul><ul><ul><li>D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. </li></ul></ul><ul><ul><li>It’s a new visualization library to build visualizations in SVG. </li></ul></ul><ul><ul><li>It can be used to visualise data using HTML or SVG, and supports interactivity and animations. </li></ul></ul>
  4. 4. <ul><li>Three Little Circles. </li></ul><ul><li>Once upon a time, </li></ul><ul><li>there were three little circles… </li></ul>
  5. 5. Why d3? <ul><li>The community is very responsive. </li></ul><ul><li>Source code is very clean. </li></ul><ul><li>API is well written. </li></ul><ul><li>they are very good introductions and you can find plenty of examples packaged with the source code or hidden in forums. </li></ul><ul><li>Visualization of data non Flash. </li></ul><ul><li>Funny! </li></ul>
  6. 6. <ul><li>DEMO </li></ul>
  7. 7. Environment <ul><li>d3.js libraries </li></ul><ul><li>Your favorite Browser </li></ul><ul><ul><li>(supports CSS3 & HTML5) </li></ul></ul><ul><li>Your favorite editor. </li></ul><ul><li>Full of </li></ul>
  8. 8. <ul><li>Getting started. </li></ul>
  9. 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. 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. 11. Reference <ul><li>Overview - http://mbostock.github.com/d3/ </li></ul><ul><li>library - https://github.com/mbostock/d3/archives/master </li></ul><ul><li>API Reference1 - http://mbostock.github.com/d3/api/ </li></ul><ul><li>API Reference2 - https://github.com/mbostock/d3/wiki/ </li></ul><ul><li>protovis - http://mbostock.github.com/protovis/ </li></ul><ul><li>community - https://groups.google.com/forum/#!forum/d3-js </li></ul><ul><li>What is Method_chaining? - http://en.wikipedia.org/wiki/Method_chaining </li></ul><ul><li>What is DOM? (W3C) - Document Object Model (DOM) Technical Reports </li></ul><ul><li>What is SVG? - http://www.w3schools.com/svg/svg_intro.asp </li></ul><ul><li>others funny implement </li></ul><ul><li>http://www.dotblogs.com.tw/ajun/archive/2011/11/07/53832.aspx </li></ul><ul><li>Lots of Tutorial about D3 - http://www.janwillemtulp.com/category/d3/ </li></ul><ul><li>Interview on Fell In Love With Data - http://fellinlovewithdata.com/guides/tftp-jan-willem-d3-protovis </li></ul><ul><li>d3.js, log.io, Buzz - http://dailyjs.com/2011/07/08/d3-logio/ </li></ul><ul><li>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 </li></ul><ul><li>Building a Tree Diagram in D3.js - http://blog.pixelingene.com/2011/07/building-a-tree-diagram-in-d3-js/ </li></ul><ul><li>Try D3 Now - http://christopheviau.com/d3_tutorial/ </li></ul><ul><li>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 </li></ul><ul><li>20 Fresh JavaScript Data Visualization Libraries – http://sixrevisions.com/javascript/20-fresh-javascript-data-visualization-libraries/ </li></ul><ul><li>Ida’s practice- http://omg3q9527.appspot.com/test01.jsp </li></ul>
  12. 12. <ul><li>Thank you </li></ul>
  1. A particular slide catching your eye?

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

×