• Like
  • Save
Playing with d3.js
Upcoming SlideShare
Loading in...5
×
 

Playing with d3.js

on

  • 2,860 views

 

Statistics

Views

Total Views
2,860
Views on SlideShare
2,322
Embed Views
538

Actions

Likes
3
Downloads
34
Comments
0

8 Embeds 538

http://www.visioncloud.eu 494
http://translate.googleusercontent.com 20
http://visioncloud.eu 15
http://localhost 3
http://duckduckgo.com 2
http://www.visionforcloud.eu 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 Playing with d3.js Presentation Transcript

    • Playing with d3.js Ida Wang [email_address] 2011-12-21 [WoFoss]
    • Agenda
      • What is d3.js?
      • Why d3?
        • (example show)
      • Environment
        • (Getting started)
      • Reference
    • 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.
      • Three Little Circles.
      • Once upon a time,
      • there were three little circles…
    • 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!
      • DEMO
    • Environment
      • d3.js libraries
      • Your favorite Browser
        • (supports CSS3 & HTML5)
      • Your favorite editor.
      • Full of
      • Getting started.
    • 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>  
    • 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>
    • 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
      • Thank you