2013年12月31日火曜日

D3.js 試してみた

D3.js の公式サイト:http://d3js.org/

●公式チュートリアル集
●Scott Murray のチュートリアル日本語訳
Learn how to make Data Visualizations with D3.js
D3 Tips and Tricks

DotInstall の D3.js のレッスンを触ってみる。

まずはテキストを操作する。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>D3.js with Text</title>
</head>
<body>
  <p> Hello 1</p>
  <p> Hello 2</p>
  <p> Hello 3</p>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script>
    var dataset = [12,24];
    var p = d3.select("body").selectAll("p");
    var update = p.data(dataset);
    var enter = update.enter();
    var exit = update.exit();
    update.text(function(d){
      return "update: " + d;
    });
    enter.append("p").text(function(d){
      return "enter: " + d ;
    });
    exit.style("color", "red").remove();
  </script>
</body>
</html>


svgを使って丸を描いてみる。



  
  D3.js -SVG circle


 
 




Transition を使う。



  
  D3.js with Transition


 
 




eachを使う。下から上へ動かし、色も変える。



  
  D3.js using each


 
 




イベントを使う。onmouse, onclickなど。



  
  D3.js using event


 
 




横棒グラフ& scale を使う



  D3.js with charts


 
 




横棒グラフ axisを使う



  
  D3.js axis
  


 
 






Disclaimer このブログは山崎富美の個人的なものです。ここで述べられていることは私の個人的な意見に基づくものであり、私の雇用者には一切の関係はありません。