D3.js

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

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

付録 グラフをソートして表示する まで。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sample</title>
    <script src="../node_modules/jquery/dist/jquery.min.js" charset="utf-8"></script>
    <script src="../node_modules/d3/d3.min.js" charset="utf-8"></script>
    <style media="screen">
      .bar { fill: orange; }
      .barNum {
        font-size: 9pt;
        text-anchor: middle;
      }
      .axis text {
        font-family: sans-serif;
        font-size: 11px;
      }
      .axis path, .axis line {
        fill: none;
        stroke: black;
      }
      .axis_x line {
        fill: none;
        stroke: black;
      }
      .barName {
        font-size: 9pt;
        text-anchor: middle;
      }
      svg { width: 640px; height: 360px; border: 1px solid black; background-color: #fff; }
    </style>
  </head>
  <body>
    <h1>ソート可能な縦棒グラフを表示</h1>
    <form>
      <input type="checkbox" id="dataSort">並び替え</input>
    </form>
    <svg id="myGraph"></svg>
    <script src="./sample_ex5.js" charset="utf-8"></script>
  </body>
</html>

d3.csv("sampleex/mydata_5.csv", function(row) {
  console.log(row);
    return {
      vendor: row.vendor,
      volume: parseInt(row.volume)
    };
  },
  function(error, data) {
    var svgEle = document.getElementById("myGraph");
    var svgWidth = parseFloat(window.getComputedStyle(svgEle, null).getPropertyValue("width"));
    var svgHeight = parseFloat(window.getComputedStyle(svgEle, null).getPropertyValue("height"));
    var offsetX = 30;
    var offsetY = 20;
    var barElements;

    // データの最大値
    var dataMax = d3.max(
      data.map(function(d, i) {
        return d.volume;
      })
    );
    dataMax *= 1.2;
    var barWidth = 25;

    var xScale = d3.scale.ordinal()
      .domain(
        data.map(function(d, i) { return d.vendor; })
      )
      .rangeRoundBands([0, svgWidth], 0.5);

    var yScale = d3.scale.linear()
      .domain([0, dataMax])
      .range([svgHeight, 0]);

    barElements = d3.select("#myGraph")
      .selectAll("rect")
      .data(data);

    barElements.enter()
      .append("rect")
      .attr("class", "bar")
      .attr("width", xScale.rangeBand())
      .attr("height", function(d, i) {
        return svgHeight - yScale(d.volume);
      })
      .attr("x", function(d, i) {
        return xScale(d.vendor) + offsetX;
      })
      .attr("y", function(d, i) {
        return yScale(d.volume) - offsetY;
      });

    // X軸の目盛りを設定、表示
    var xAxisElements = d3.select("#myGraph")
      .append("g")
      .attr("class", "axis")
      .attr("transform", "translate(" + offsetX + ", " + (svgHeight - offsetY) + ")")
      .call(
        d3.svg.axis()
          .scale(xScale)
          .orient("bottom")
      );

    // Y軸の目盛りを設定、表示
    var yAxisElements = d3.select("#myGraph")
      .append("g")
      .attr("class", "axis")
      .attr("transform", "translate(" + offsetX + ", -" + offsetY + ")")
      .call(
        d3.svg.axis()
          .scale(yScale)
          .orient("left")
      );

    d3.select("#dataSort").on("change", function() {
      if (this.checked) {
        var s = data.sort(function(a, b) { return b.volume - a.volume; });
      } else {
        var s = data.sort(function(a, b) { return a.volume - b.volume; });
      }

      var sortResult = s.map(function(d, i) { return d.vendor; });

      xScale.domain(sortResult);

      xAxisElements.call(
        d3.svg.axis()
          .scale(xScale)
          .orient("bottom")
      );

      barElements.attr("x", function(d, i) {
        return xScale(d.vendor) + offsetX;
      });
    });
  }
);

f:id:yossk:20150626233337j:plain f:id:yossk:20150626233348j:plain