D3.jsを用いた地理情報の
ビジュアライズ


ジオメディアサミット in FOSS4G 2014 Hokkaido

Created by @_shimizu

目次


  1. 自己紹介
  2. 地理情報の視覚化とは
  3. D3.jsとは
  4. D3 Geo
  5. D3 Geo Example
  6. D3.jsと地図
  7. 学習リソースの紹介

自己紹介


誰ですか?



  • 清水正行
  • 群馬県高崎市在住
  • 社内SE
  • 主に不動産関係のシステムとか作ってます

Blog

GUNMA GIS GEEK


  • 学習記録として開始
  • 2012年中ごろからD3.jsについて書き始める
  • 2013年ブログタイトル変更
  • GISの勉強を始めて約一年半

つまりド素人です。


(実は今回のプレゼンのポイント)

地理情報の視覚化とは


Geovisualization

ビジュアライゼーション(視覚化)とは、人間が直接見ることのできない現象・事象・関係性を、見ることのできるもの、画像・グラフ・図などにすること。
その中でも、位置情報や地理空間情報を含むデータを地図を用いて視覚化したものを「Geovisualization」と呼ぶ。

有名な作品

John Snow の感染地図


1850年代、イギリスの麻酔科医ジョン・スノーがそれまでの通説だったコレラ感染の原因「瘴気説」に疑問を抱き、独自の調査を行った。その際に作成されたのが下記の地図。地図にコレラ患者を記入していき、コレラの感染と飲料水との関係を明らかにした。

Charles Minard のナポレオンマーチ


1861年、フランスの土木技術者 チャールズ・ジョセフ・マイナード(?)が作成したナポレオンのモスクワ遠征の視覚化。 軍の勢力がモスクワに向かうにつれ漸減する様子を地図上に帯状ラインで示し、遠征の失敗の要因となった4つの異なる変数の変化を一枚の2次元の図に表している。

Jacques Bertin の「図の記号学」


統計情報の処理・伝達手段としての地図表現を開拓したフランスのジャック・ベルタンは1967年に出版された著書「図の記号学」の中で、多くのGeovisualization表現を発案している。

地理情報を使った視覚化は

実用的で何よりカッコイイ

Web上でも地図を使った

視覚化を行いたい

フロントエンドエンジニアの悩み


  • Webで地図=Google Maps API
  • 制限がきつい、自由度が少ない
  • 似たような表現しかできない
  • できれば多くのブラウザに対応したい
  • そもそも地理情報扱うの難しい……

そこで「D3.js」ですよ!

D3.jsとは?


データビジュアライゼーションライブラリ

D3 Show Reel


プロモーションビデオ

D3 Show Reel from Mike Bostock on Vimeo.

チャートライブラリ?

違います

Data Driven Documents

データ駆動ドキュメント

データを要素に束縛し、
データを基に要素の追加や削除を行ったり、
属性やスタイルを操作するjavascriptライブラリ

サンプルコード


bodyタグ内にデータセットの数だけdiv要素を追加し、データセットの値をdivのwidth属性(幅)に適用する


var dataSet = [10, 20, 30]; //データセット

d3.select("body")		//bodyタグを選択
	.selectAll("div")	//お約束*
	.data(dataSet)		//データを束縛	
	.enter()	//データを基にした操作を開始する
	.append("div")		//div要素を追加
	.attr("width", function(d){ return d } );	//値を適用

出力結果


先ほどのサンプルコードを実行した後のHTML


<body>
	<div width="10"></div>
	<div width="20"></div>
	<div width="30"></div>
</body>

D3の特徴


  • オープンソース(修正BSDライセンス)
  • プラグインレス
  • jQueryライクなDOM操作
  • 視覚化に必要な面倒な計算を自動化
  • 地理情報を扱うためのヘルパー機能が豊富

D3でグラフを作るには


  • 「棒グラフを表示するメソッド」のような物は無い
  • データをどのように表現するかは製作者が決定する
  • HTML,canvas,SVG、なにを使うのも自由
  • エレメントを操作して自らグラフや図を描く必要がある

急勾配な
学習曲線

高い自由度

ところで作者は?


Mike Bostock

データジャーナリズムなどで有名なThe New York Times の グラフィック部門のエンジニア兼編集者

Opening Keynote

OSGeoからも熱い注目!

D3 GEO


地理情報視覚化機能

Projection


D3は様々な投影法に対応

参考

Map Projection Transitions

D3 地図描画フロー


D3を使って地図を表示するまでの流れ


  1. 地理情報(GeoJSON)を読み込む
  2. 投影法、スケール、初期位置などを設定
  3. パス変換関数を生成
  4. 変換関数を用いて地理情報をパスストリングに変換
  5. インラインSVGを使ってブラウザに表示

Geo JSON


  • 地理情報をJSONで表現するための規格
  • 面、線などのベクター情報や点情報を表現できる
  • Web上で使いやすい
  • 拡張・編集しやすい
  • 最近、Google Maps APIも対応


参考

GeoJSON フォーマット仕様

d3.json


外部のJSONデータを読み込む


d3.json('hoge.geojson', function(geojson){
	console.log(geojson)	//読み込んだデータの出力
});

d3.geo.projection


投影法やサイズ、中心位置などを設定する


var projection = d3.geo
	.mercator() //メルカトル図法を指定
	.scale(3000) //地図のサイズ
	.rotate([0,0,0]) //地図の回転 [x軸, y軸, z軸]
	.center([0.0, 0.0]) //中心位置[lng, lat]

d3.geo.path


GeoJSONをSVGパスストリングに変換する関数


var path = d3.geo.path()
	.projection(projection); //projection関数を渡す

 path(geojson); //svg pathのパスストリングに変換

サンプルコード


GeoJSONを読み込んで、SVGのPath要素として表示する


d3.json("japan.geojson", function(geojson){

  //投影法指定
  var projection = d3.geo
    .mercator()		//投影法の指定
    .scale(1500)	//スケール(ズーム)の指定
    .translate([300,350])
    .center([139.0032936, 36.3219088]); //中心の座標を指定

  //パスジェネレータ作成
  var path = d3.geo.path().projection(projection); 		

  //地図描画
  var map =  d3.select("svg")
    .selectAll("path")
    .data(geojson.features)
    .enter()
    .append("path")
    .attr({
      "d": function(d){ return path(d) },
      "fill": "green",
      "stroke": "black"
    });
});
 

フロントエンドの技術と知識で
地理情報を視覚化できる


D3 Geo Example


作ってみた物

ベクターデータ描画1


GeoJSONで読み込んだ世界地図(面)データを描画

ベクターデータ描画2


地球儀として描画。元データは地形描画1と同じもの

コロプレス図1


各市区町村の隣接数で塗り分けを行った例

コロプレス図2


複数の地図を読み込んだcsvデータと連動させた例

地図とグラフの連動


散布図と地図の連動

other

地図デザイン


SVGのフィルター機能等を使ってデザイン

他、地図ライブラリとの連動


都道府県境界データ(ポリゴン)を表示


Google Maps API

OpenLayers

Leaflet.js

ボロノイ図


Google Map上にD3で作成したボロノイ図を表示

other

HTML5の機能と地図を連動


Webカメラでヘッドトラッキングを行い地球儀を回転

組み合わせたら面白そう


  • Web Socket
    複数人でリアルタイムに同時編集できる地図システム
  • モバイルセンサー
    位置情報、傾きセンサー、電子コンパス
  • localStrage
    ブラウザにデータを保存して永続化。パーソナライズ
  • Cache Manifest
    オフラインでも使えるWeb地図アプリ
  • Three.js
    3D表示、やってみた。まだ、使いこなせていない

夢無限大!

D3と地図


可能になったこと

D3の登場によって、フロントエンドで地図を扱うハードルはかなり低くなりました。

D3には非常に活発なファンたちによるエコシステムができています。

数多くのD3 Fanによって、日々新しい視覚化地図が生み出されています

What Happens When Everyone Makes Maps?

 「地図製作者」にとってCartographerとは、地図学の知識(例えば投影法に熟達しているなど)や測量技術を備えた専門家を指します。
 しかし、今新たに増えているCartographerは、JavaScriptやPythonなどのプログラミング言語を使用しているソフトウェア・エンジニアまたは開発者です。
  
 マッピングの新しい民主化が起きているのです。

Everyone, Cartographer

あなたもD3を使って地図を描いてみませんか?

Happy Hacking
Geovisualization!

学習リソースの紹介


おまけ

参考書


インタラクティブ・データビジュアライゼーション ―D3.jsによるデータの可視化 データビジュアライゼーションのためのD3.js徹底入門 Webで魅せるグラフ&チャートの作り方 エンジニアのための データ可視化[実践]入門 ―D3.jsによるWebの可視化 (Software Design plus)

Webドキュメント