D3.js

D3.js JavaScript

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

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

第12章 バックレイアウトまで。 こういう図をパックレイアウトと呼ぶこと自体しらなんだ。勉強になる。

<!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;
      }
      circle { stroke: none; opacity: 0.25; }
      text { font-size: 10pt; text-anchor: middle; fill: black; opacity: 0; }
      svg { width: 320px; height: 320px; 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>
          <form>
             <input type="button" class="btn btn-primary btn-sm" value="2000年" data-year="year2000">
             <input type="button" class="btn btn-primary btn-sm" value="2005年" data-year="year2005">
             <input type="button" class="btn btn-primary btn-sm" value="2010年" data-year="year2010"> 
          </form>
        </div>
        <div class="col-sm-4">
        </div>
        <div class="col-sm-4">
        </div>
      </div>
      <script src="sample12_5.js" charset="utf-8"></script>
    </div>
  </body>
</html>

(function() {
  var svgEle = document.getElementById("myGraph1");
  var svgWidth = parseFloat(window.getComputedStyle(svgEle, null).getPropertyValue("width"));
  var svgHeight = parseFloat(window.getComputedStyle(svgEle, null).getPropertyValue("height"));
  var pack;
  var circles;
  var texts;
  var bubble;
  var allData;
  var year = "year2000";

  d3.json("sample12/data.json", function(error, data) {
    allData = data;
    drawPackLayout(data);
  });

  function drawPackLayout(dataset) {
    // カラーを準備
    colors = d3.scale.category10();

    bubble = d3.layout.pack()
      .size([svgWidth, svgHeight]);

    // パックレイアウトで使用するグループを作成
    pack = d3.select("#myGraph1")
      .selectAll("g")
      .data(bubble.value(function(d, i) {
        return d[year];
      }).nodes(dataset))
      .enter()
      .append("g");

    circles = pack.append("circle")
      .attr("r", 0)
      .attr("transform", function(d, i) {
        return "translate(" + d.x + ", " + d.y + ")";
      })
      .style("fill", function(d, i) {
        return colors(i);
      });

    circles.transition()
      .duration(function(d, i) {
        return d.depth * 1000 + 500;
      })
      .attr("r", function(d) {
        return d.r;
      });

    texts = pack.append("text")
      .attr("transform", function(d, i) {
        return "translate(" + d.x + ", " + d.y + ")";
      });
    texts.style("opacity", 0)
      .transition()
      .duration(3000)
      .style("opacity", 1.0)
      .text(function(d, i) {
        if (d.depth == 1) { return d.name; }
        return null;
      });
  }

  d3.selectAll("input").on("click", function() {
    year = d3.select(this).attr("data-year");
    pack.data(bubble.value(function(d, i) {
      return d[year];
    }).nodes(allData));

    circles.transition()
      .duration(500)
      .ease("bounce")
      .attr("r", function(d, i) {
        return d.r;
      })
      .attr("transform", function(d, i) {
        return "translate(" + d.x + ", " + d.y + ")";
      });

    texts.transition()
      .duration(500)
      .ease("bounce")
      .attr("transform", function(d, I) {
        return "translate(" + d.x + ", " + d.y + ")";
      });
  });
})();

f:id:yossk:20150614101839j:plain