D3.js

D3.js JavaScript

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

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

第8章 円グラフまで。 自動的に数が大きい方から先詰めになるので、データの作りかたをミスると表示順序がめちゃくちゃになるので注意。

<!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">
      .pie { fill: orange; stroke: gray; }
      .total { font-size: 9pt; text-anchor: middle; }
      .pieNum { font-size: 10pt; text-anchor: middle: }
      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>
          <form>
            <select id="year" name="year">
              <option value="2008">2008年</option>
              <option value="2009">2009年</option>
              <option value="2010">2010年</option>
              <option value="2011">2011年</option>
              <option value="2012">2012年</option>
              <option value="2013">2013年</option>
              <option value="2014">2014年</option>
              <option value="2015">2015年</option>
            </select>
          </form>
        </div>
        <div class="col-sm-4">
        </div>
        <div class="col-sm-4">
        </div>
      </div>
      <script src="sample8.js" charset="utf-8"></script>
    </div>
  </body>
</html>

drawPie("sample8/mydata2008.csv");

d3.select("#year").on("change", function() {
  d3.select("#myGraph1").selectAll("*").remove();
  drawPie("sample8/mydata" + this.value + ".csv", this.value);
});

function drawPie(filename, year) {
  d3.csv(filename, function(error, data) {
    var dataset = [];
    for (var i in data[0]) {
      dataset.push(data[0][i]);
    }

    var svgEle = document.getElementById("myGraph1");
    var svgWidth = parseFloat(window.getComputedStyle(svgEle, null).getPropertyValue("width"));
    var svgHeight = parseFloat(window.getComputedStyle(svgEle, null).getPropertyValue("height"));

    // var dataset = [5, 10, 8, 12, 16, 20, 12, 18, 6, 9, 10, 6, 15, 20];
    // var colors = d3.scale.category20b();
    var colors = d3.scale.category10();

    var pie = d3.layout.pie();
    var arc = d3.svg.arc().innerRadius(30).outerRadius(100);
    var pieElements = d3.select("#myGraph1")
      .selectAll("g")
      .data(pie(dataset))
      .enter()
      .append("g")
      .attr("transform", "translate(" + svgWidth / 2 + ", " + svgHeight / 2 + ")");

    pieElements
      .append("path")
      .attr("class", "pie")
      .style("fill", function(d, i) {
        return colors(i);
      })
      .transition()
      .duration(200)
      .delay(function(d, i) {
        return i * 200;
      })
      .ease("linear")
      .attrTween("d", function(d, i) {
        var interpolate = d3.interpolate(
          { startAngle: d.startAngle, endAngle: d.startAngle },
          { startAngle: d.startAngle, endAngle: d.endAngle }
        );
        return function(t) {
          return arc(interpolate(t));
        };
      });

    var textElements = d3.select("#myGraph1")
      .append("text")
      .attr("class", "total")
      .attr("transform", "translate(" + svgWidth / 2 + ", " + (svgHeight / 2 + 5) + ")")
      .text("合計:" + d3.sum(dataset));

    pieElements
      .append("text")
      .attr("class", "pieNum")
      .attr("transform", function(d, i) {
        return "translate(" + arc.centroid(d) + ")";
      })
      .text(function(d, i) {
        return d.value;
      });
  });
}

f:id:yossk:20150610224556j:plain