読者です 読者をやめる 読者になる 読者になる

D3.js

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

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

第13章 ツリーマップレイアウトまで。 データをビジュアル化する際には、見た目のインパクトも必要なのかな。

<!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">
      .file { stroke: black; fill: #777; }
      .name { font-size: 10pt; text-anchor: middle; }
      svg { width: 800px; height: 800px; border: 1px solid black; }
    </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="sample13_3.js" charset="utf-8"></script>
    </div>
  </body>
</html>
var svgEle = document.getElementById("myGraph1");
var svgWidth = parseFloat(window.getComputedStyle(svgEle, null).getPropertyValue("width"));
var svgHeight = parseFloat(window.getComputedStyle(svgEle, null).getPropertyValue("height"));

d3.text("sample13/sample.txt", function(error, data) {
  var count = [];
  for (var i = 0; i < data.length; i++) {
    var c = data.charAt(i);
    if (!count[c]) {
      count[c] = 1;
    } else {
      count[c] += 1;
    }
  }

  var temp = [];
  for(i in count) { temp.push({ name: i, value: count[i] }); }
  var dataset = { children: temp };
  drawTreemap(dataset);

});

function drawTreemap(dataset) {

  // ツリーマップレイアウト
  var treemap = d3.layout.treemap()
    .size([svgWidth, svgHeight]);
    // .size([svgWidth, svgHeight])
    // .mode("slice");

  // ツリーマップの描画
  var tmap = d3.select("#myGraph1")
    .selectAll("rect")
    .data(treemap.nodes(dataset));

  // 分割マップ領域を追加
  tmap.enter()
    .append("rect")
    .attr("class", "file")
    .attr("x", function(d, i) {
      return d.x;
    })
    .attr("y", function(d, i) {
      return d.y;
    })
    .attr("width", function(d, i) {
      return d.dx;
    })
    .attr("height", function(d, i) {
      return d.dy;
    })
    .style("opacity", 0)
    .transition()
    .delay(function(d, i) {
      return d.depth * 500;
    })
    .style("opacity", function(d, i) {
      return d.depth / 5;
    });

  // マップ内に文字を追加
  tmap.enter()
    .append("text")
    .attr("class", "name")
    .attr("transform", function(d, i) {
      return "translate(" + (d.x + d.dx / 2) + ", " + (d.y + d.dy / 2) + ")";
    })
    .attr("dy", "0.2em")
    .text(function(d, i) {
      if ((d.depth == 0) || (d.children)) { return null; }
      return d.name;
    })
    .style("font-size", function(d, i) {
      return (d.dx * d.dy) / 200;
    });
}

f:id:yossk:20150616223607j:plain f:id:yossk:20150616223613j:plain