D3.js

D3.js JavaScript

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

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

第7章 縦棒グラフ まで。

<!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">
      .axis text {
        font-family: sans-serif;
        font-size: 11px;
      }
      .axis path, .axis line {
        fill: none;
        stroke: black;
      }
      .axis_x line {
        fill: none;
        stroke: black;
      }
      .bar { fill: orange; }
      .barName {
        font-size: 9pt;
        text-anchor: middle;
      }
      .barNum {
        font-size: 9pt;
        text-anchor: middle;
        /*text-anchor: end;
        writing-mode: tb;
        glyph-orientation-vertical: 90;*/
      }
      svg { width: 320px; height: 240px; border: 1px solid; }
    </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">
        </div>
        <div class="col-sm-4">
        </div>
      </div>
      <script src="sample7.js" charset="utf-8"></script>
    </div>
  </body>
</html>

d3.csv("sample7/mydata.csv", function(error, data) {
  var dataset = [];
  var labelName = [];
  for (var i in data[0]) {
    dataset.push(data[0][i]);
    labelName.push(i);
  }

  // SVG要素の幅と高さを求める
  var svgEle = document.getElementById("myGraph1");
  var svgHeight = window.getComputedStyle(svgEle, null).getPropertyValue("height");
  svgHeight = parseFloat(svgHeight);

  // グラフで使用する変数
  var offsetX = 30;
  var offsetY = 20;
  var barElements;
  var dataMax = 300;
  var barWidth = 20;
  var barMargin = 35;

  svgEle.style.width = dataset.length * (barWidth + barMargin) + offsetX;
  // px を外さなくても問題なかった @Chrome
  var svgWidth = parseFloat(svgEle.style.width);

  // グラフを描画
  barElements = d3.select("#myGraph1")
    .selectAll("rect")
    .data(dataset);

  // データの追加
  barElements.enter()
    .append("rect")
    .attr("class", "bar")
    .attr("height", 0)
    .attr("width", barWidth)
    .attr("x", function(d, i) {
      return i * (barWidth + barMargin) + offsetX;
    })
    .attr("y", svgHeight - offsetY)
    .on("mouseover", function() {
      d3.select(this)
        .style("fill", "red");
    })
    .on("mouseout", function() {
      d3.select(this)
        .style("fill", "orange");
    })
    .transition()
    .duration(1000)
    .delay(function(d, i) {
      return i * 100;
    })
    .attr("y", function(d, i) {
      return svgHeight - d - offsetY;
    })
    .attr("height", function(d, i) {
      return d;
    });

  // データ値表示
  barElements.enter()
    .append("text")
    .attr("class", "barNum")
    .attr("x", function(d, i) {
      return i * (barWidth + barMargin) + 10 + offsetX;
    })
    .attr("y", svgHeight - 5 - offsetY)
    .text(function(d, i) {
      return d;
    });

  // メモリを表示するためにスケールを設定
  var yScale = d3.scale.linear()
    .domain([0, dataMax])
    .range([dataMax, 0]);

  // メモリを設定し表示する
  d3.select("#myGraph1")
    .append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + offsetX + ", " + ((svgHeight - 300) - offsetY) + ")")
    .call(
      d3.svg.axis()
        .scale(yScale)
        .orient("left")
        // .ticks(10)
        // .tickValues([10, 20, 30, 50, 100, 150, 200])
        // .tickFormat(d3.format(".2f"))
    );

  // 横方向の線を表示する
  d3.select("#myGraph1")
    .append("rect")
    .attr("class", "axis_x")
    .attr("width", svgWidth)
    .attr("height", 1)
    .attr("transform", "translate(" + offsetX + ", " + (svgHeight - offsetY) + ")");

  // 横のラベルを表示する
  barElements.enter()
    .append("text")
    .attr("class", "barName")
    .attr("x", function(d, i) {
      return i * (barWidth + barMargin) + 10 + offsetX;
    })
    .attr("y", svgHeight - offsetY + 15)
    .text(function(d, i) {
      return labelName[i];
    });
});

f:id:yossk:20150607224635j:plain