Playing with d3.js
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Playing with d3.js

on

  • 3,001 views

 

Statistics

Views

Total Views
3,001
Views on SlideShare
2,457
Embed Views
544

Actions

Likes
3
Downloads
35
Comments
0

8 Embeds 544

http://www.visioncloud.eu 498
http://translate.googleusercontent.com 20
http://visioncloud.eu 15
http://www.visionforcloud.eu 4
http://localhost 3
http://duckduckgo.com 2
http://192.168.0.108 1
https://duckduckgo.com 1
More...

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

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

Playing with d3.js Presentation 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