D3.jsを使ってジオデータのビジュアライズができることを目指した第一回勉強会のまとめ。
環境設定・地図データの用意・表示と色の変更を行った。
環境設定
簡易サーバの用意
表示のために簡易サーバーを作成する。終わったら止めるのを忘れずに(Ctrl+C）
1.自分の「共有」(shared)フォルダの下に適当な名前のフォルダを作る(Geoworkingとした)。
※共有のパスがOSのバージョンによって違うようだ。shareの人とsharedの人がいた。自分の環境にあわせて変える。
2.ターミナルを開き、cd / Users/Shared /Geoworking(任意のフォルダ名)と入力
※さっき作ったフォルダのパス。share/sharedに注意。
3.python -m SimpleHTTPServer 3000と入力
4.ブラウザでhttp://localhost:3000 にアクセスできるか確認。
これで完了。
地図データの用意
国土地理院のデータをダウンロードし、GeoJSON形式に変換する。
1.国土数値情報より任意の都道府県の年度のデータをダウンロード
http://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N03.html
2.QGISをダウンロード＆インストール
http://www.kyngchaos.com/software/qgis
必要なのは 以下。先にQGISをインストールしようとすると怒られるので、他のものを先に行う。
- GDAL Completeと同梱のNumpy
- GSL framework
- Matplotlib
- QGIS本体
3.先ほどDLした地図データをGeoJSONに変換する。QGISでDLしたフォルダの中のshapeファイル(拡張子shp)を開き、
レイヤー⇒名前を付けて保存⇒形式でGeoJSONを選択して保存、GeoWorkingフォルダ内に格納。
私は東京をDLしたので「Tokyo.json」としました。
表示
1.htmlファイルを用意。test.htmlとし、Geoworkingフォルダに格納。
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<div id="map"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="mapping.js"></script>
</body>
2.JavaScriptのファイルを用意。mapping.jsとし、Geoworkingフォルダに格納。
sawamur@githubの投稿を流用させてもらった。
http://qiita.com/sawamur@github/items/ec32237bcbaaba94108d
"Tokyo.json"の部分を自分が作成したJSONファイルのの名前に変える
(function() {
var g,
width = 1000,
height = 800;
// svg要素を作成し、データの受け皿となるg要素を追加している
map = d3.select('#map').append('svg')
.attr('width', width)
.attr('height', height)
.append('g');
// 同じディレクトリにあるgeojsonファイルをhttp経由で読み込む
d3.json("Tokyo.json", function(json) {
var projection,
path;
// 投影を処理する関数を用意する。データからSVGのPATHに変換するため。
projection = d3.geo.mercator()
.scale(45000)
.center(d3.geo.centroid(json)) // データから中心点を計算
.translate([width / 2, height / 2]);
// pathジェネレータ関数
path = d3.geo.path().projection(projection);
// これがenterしたデータ毎に呼び出されpath要素のd属性に
// geoJSONデータから変換した値を入れる
map.selectAll('path')
.data(json.features)
.enter()
.append('path')
.attr('d', path)
.attr("fill", function(d){
// 適当に色を塗るなど
return "hsl(0,50%,10%)";
})
.attr("stroke","hsl(80,10%,80%)" )
.on('mouseover', function(d){
// mouseoverの時のインタラクション
})
.on('click', function(d) {
// clickされた時のインタラクション
});
});
})();
3.ブラウザから開く。
http://localhost:3000/
にアクセスするとフォルダ内のファイルが表示されるため、そこからさっき作った htmlファイル(test.html) を選ぶと地図が表示される。縮尺によってうまく表示されない場合があるが、その場合は .scale(45000) の部分をいじってやる。
4.地図が表示されるので、色を変えたりして遊ぶ。
次回は「何か動かしてみよう」とのこと