D3.js

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

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

第15章 地図/マップレイアウトまで。今回はちょっと用意することが必要だった

国土数値情報 行政区域データの詳細

  • 変換 brew install gdal を実行し以下のコマンドで変換
ogr2ogr -f GeoJSON world.json ./ne_50m_admin_0_countries.shp

npm で d3-geo-projection もインストールしておく。

f:id:yossk:20150620110620j:plain

日本地図については、Ruby のお膝元、島根県地図を利用した。

<!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>

    <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>
    <script src="../node_modules/d3-geo-projection/d3.geo.projection.min.js" charset="utf-8"></script>

    <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">
      svg { width: 300px; height: 380px; border: 1px solid black; background-color: #fff; }
      /*svg { width: 640px; height: 640px; border: 1px solid black; background-color: #fff; }*/
      path { fill: white; stroke: black; stroke-width: 0.5; }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>島根県 市町村色分け</h1>
      <div class="row">
        <div class="col-sm-4">
          <h3>大正 8 年</h3>
          <svg id="myGraph1"></svg>
        </div>
        <div class="col-sm-4">
          <h3>昭和 50 年</h3>
          <svg id="myGraph2"></svg>
        </div>
        <div class="col-sm-4">
          <h3>平成 26 年</h3>
          <svg id="myGraph3"></svg>
        </div>
      </div>
      <!-- <h1>少しリアルな地球を表示</h1>
      <svg id="myGraph">
        <radialGradient id="grad" cx="0.55" cy="0.55" r="0.75" fx="0.25" fy="0.25">
          <stop offset="0%" stop-color="#2f44ff" />
          <stop offset="100%" stop-color="#000000" />
        </radialGradient>
      </svg>
      <canvas id="myCanvas" width="640" height="640"></canvas> -->
    </div>
    <script src="sample15_8.js" charset="utf-8"></script>
  </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"));

var objs = [
  { id: "#myGraph1", data: "sample15/shimane_taisyo.json"},
  { id: "#myGraph2", data: "sample15/shimane_syowa.json"},
  { id: "#myGraph3", data: "sample15/shimane_heisei.json"}
];
var offsetY = 30;
var scale = 7000;

for (var i = 0; i < objs.length; i++) { drawMap(objs[i]); }

function drawMap(obj) {
  console.log(obj.data);
  d3.json(obj.data, function(error, pref) {
    var path = d3.geo.path()
      .projection(
        d3.geo.mercator()
          // .center([132.45, 35.22])
          .center(d3.geo.centroid(pref))
          .scale(scale)
          .translate([svgWidth / 2, svgHeight / 2 + offsetY])
      );

    d3.select(obj.id)
      .selectAll("path")
      .data(pref.features)
      .enter()
      .append("path")
      .attr("d", path)
      .style("fill", function(d, i) {
        if (d.properties.N03_004.lastIndexOf("市") > -1) { return "#f99"; }
        if (d.properties.N03_004.lastIndexOf("町") > -1) { return "#070"; }
        if (d.properties.N03_004.lastIndexOf("村") > -1) { return "#ff8"; }
        return "white";
      });
  });
}

f:id:yossk:20150620110904j:plain