D3.js

D3.js JavaScript

Kindle本50％ポイント還元だったので購入！

データビジュアライゼーションのためのD3.js徹底入門　Webで魅せるグラフ＆チャートの作り方

データビジュアライゼーションのためのD3.js徹底入門　Webで魅せるグラフ＆チャートの作り方

第2章まで。

atom を使って書いてみた。以下のプラグインを追加した。 * autocomplete-paths * atom-bootstrap3 atom-html-preview も入れてみたが、JavaScript が動かなかった。 また、サンプルを動かす際、Chrome だとそのままではローカルファイルが読めないので、python の SimpleHTTPServer を使う。 とりあえずサンプルなので、npm でインストールした各種ライブラリをそのまま使った

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>D3 Sample1</title>

    <link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="../node_modules/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="../node_modules/octicons/octicons/octicons.css" rel="stylesheet">

    <style media="screen">
      svg { width: 320px; height: 240px; border: none; }
      #myGraph rect {
        stroke: rgb(160, 0, 0);
        stroke-width: 1px;
        fill: rgb(255, 0, 0);
      }

      .axis text {
        font-family: sans-serif;
        font-size: 11px;
      }
      .axis path,
      .axis line {
        fill: none;
        stroke: black;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>横棒グラフ</h1>

      <div>
        <button type="button" name="button" id="updateButton" class="btn btn-warning">データ更新</button>
      </div>

      <svg id="myGraph">
      </svg>
    </div>

    <script src="../node_modules/d3/d3.min.js" charset="utf-8"></script>
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js" charset="utf-8"></script>
    <script src="sample2.js" charset="utf-8"></script>

  </body>
</html>

var dataset = [];

d3.csv("mydata.csv", function(error, data) {
  for (var i = 0; i < data.length; i++) {
    dataset.push(data[i].item1);
  }

  d3.select("#myGraph")
    .selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", 10)
    .attr("y", function(d, i) {
        return i * 25 + 20;
    })
    .attr("height", "20px")
    .attr("width", "0px")
    .on("click", function() {
      d3.select(this)
        .style("fill", "cyan");
    })
    .transition()
    .delay(function(d, i) {
        return i * 250;
    })
    .duration(1500)
    .attr("width", function(d, i) {
      return d + "px";
    });

  var xScale = d3.scale.linear()
    .domain([0, 300])
    .range([0, 300]);

  d3.select("#myGraph")
    .append("g")
    .attr("class", "axis")
    .attr("transform", "translate(10, " + ((1 + dataset.length) * 20 + 25) + ")")
    .call(
      d3.svg.axis()
        .scale(xScale)
        .orient("bottom")
    );
});

d3.select("#updateButton")
  .on("click", function() {
    for (var i = 0; i < dataset.length; i++) {
      dataset[i] = Math.floor(Math.random() * 320);
    }

    d3.select("#myGraph")
      .selectAll("rect")
      .data(dataset)
      .transition()
      .attr("width", function(d, i) {
        return d + "px";
      });
  });

f:id:yossk:20150602230146j:plain