D3.js - 続けたい日記

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

作者: 古籏一浩
出版社/メーカー: SBクリエイティブ株式会社
発売日: 2014/07/01
メディア: Kindle版
この商品を含むブログを見る

第5章様々な形式のファイルからデータを読み込む、まで。デフォルトでいろんな形式に対応しているのはいい。ほとんど使わないけど。サンプルは、tsvだけやってない。タブを入力できるエディタがないから！

<!DOCTYPE html>
<html lang="ja">
  <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>SVG</title>

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

    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style media="screen">
      svg { width: 320px; height: 240px; border: 1px solid; }
      .bar { fill: orange; }
    </style>
  </head>
  <body>
    <script src="../node_modules/jquery/dist/jquery.min.js" charset="utf-8"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js" charset="utf-8"></script>
    <script src="../node_modules/d3/d3.min.js" charset="utf-8"></script>

    <div class="container">
      <h1>データに応じてグラフを表示</h1>
      <div class="row">
        <div class="col-sm-4">
          <svg id="myGraph1"></svg>
        </div>
        <div class="col-sm-4">
          <svg id="myGraph2"></svg>
        </div>
        <div class="col-sm-4">
          <svg id="myGraph3"></svg>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-4">
          <svg id="myGraph4"></svg>
        </div>
        <div class="col-sm-4">
          <svg id="myGraph5"></svg>
        </div>
        <div class="col-sm-4">
          <svg id="myGraph6"></svg>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-4">
          <svg id="myGraph7"></svg>
        </div>
        <div class="col-sm-4">
          <svg id="myGraph8"></svg>
        </div>
        <div class="col-sm-4">
        </div>
      </div>
      <script src="sample5.js" charset="utf-8"></script>
    </div>
  </body>
</html>

var dataset = [50, 10, 120, 200, 90];
d3.select("#myGraph1")
  .selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("class", "bar")
  .attr("width", function(d, i){
    return d;
  })
  .attr("height", 20)
  .attr("x", 0)
  .attr("y", function(d, i) {
    return i * 25;
  });

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

  d3.select("#myGraph2")
    .selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("class", "bar")
    .attr("width", function(d, i){
      return d;
    })
    .attr("height", 20)
    .attr("x", 0)
    .attr("y", function(d, i) {
      return i * 25;
    });
});

d3.csv("sample5/mydata_jp.csv")
  .row(function(d) {
    return {
      item1: d["商品A"] / 2,
      item2: d["商品B"],
      item3: d["商品C"],
    };
  })
  .get(function(error, data) {
    var dataset = [];
    for (var i = 0; i < data.length; i++) {
      dataset.push(data[i].item1);
    }

    d3.select("#myGraph3")
      .selectAll("rect")
      .data(dataset)
      .enter()
      .append("rect")
      .attr("class", "bar")
      .attr("width", function(d, i){
        return d;
      })
      .attr("height", 20)
      .attr("x", 0)
      .attr("y", function(d, i) {
        return i * 25;
      });
  });

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

  d3.select("#myGraph4")
    .selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("class", "bar")
    .attr("width", function(d, i){
      return d;
    })
    .attr("height", 20)
    .attr("x", 0)
    .attr("y", function(d, i) {
      return i * 25;
    });
});

d3.html("sample5/mydata.html", function(error, doc) {
  var tr = doc.querySelectorAll("table tr");
  var dataset = [];
  for (var i = 1; i < tr.length; i++) {
    var d = tr[i].querySelectorAll("td")[0].firstChild.nodeValue;
    dataset.push(d);
  }

  d3.select("#myGraph5")
    .selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("class", "bar")
    .attr("width", function(d, i){
      return d;
    })
    .attr("height", 20)
    .attr("x", 0)
    .attr("y", function(d, i) {
      return i * 25;
    });
});

d3.xml("sample5/mydata.xml", function(error, doc) {
  var xmldata = doc.querySelectorAll("data");
  var salesroot = xmldata[0];
  var salesdata = salesroot.querySelectorAll("sales");
  var dataset = [];
  for (var i = 1; i < salesdata.length; i++) {
    var d = salesdata[i].firstChild.nodeValue;
    dataset.push(d);
  }

  d3.select("#myGraph6")
    .selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("class", "bar")
    .attr("width", function(d, i){
      return d;
    })
    .attr("height", 20)
    .attr("x", 0)
    .attr("y", function(d, i) {
      return i * 25;
    });
});

d3.text("sample5/mydata.txt", function(error, doc) {
  var data = doc.split("\x0a");
  var dataset = [];
  var sales = data[0].split("/");
  for (var i = 1; i < sales.length; i++) {
    dataset.push(sales[i]);
  }

  d3.select("#myGraph7")
    .selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("class", "bar")
    .attr("width", function(d, i){
      return d;
    })
    .attr("height", 20)
    .attr("x", 0)
    .attr("y", function(d, i) {
      return i * 25;
    });
});

d3.text("sample5/mydata_.txt", function(error, doc) {
  var dataset = d3.dsv("_", "text/plain").parse(doc);

  d3.select("#myGraph8")
    .selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("class", "bar")
    .attr("width", function(d, i){
      return d["商品B"];
    })
    .attr("height", 20)
    .attr("x", 0)
    .attr("y", function(d, i) {
      return i * 25;
    });
});