D3.js
データビジュアライゼーションのためのD3.js徹底入門 Webで魅せるグラフ&チャートの作り方
- 作者: 古籏一浩
- 出版社/メーカー: SBクリエイティブ株式会社
- 発売日: 2014/07/01
- メディア: Kindle版
- この商品を含むブログを見る
第15章 地図/マップレイアウトまで。今回はちょっと用意することが必要だった
- マップについて www.naturalearthdata.com
- 変換 brew install gdal を実行し以下のコマンドで変換
ogr2ogr -f GeoJSON world.json ./ne_50m_admin_0_countries.shp
npm で d3-geo-projection もインストールしておく。
日本地図については、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"; }); }); }