D3.js入門
この教材は、D3.jsを用いてGISデータをビジュアライズし、WEB上に表示する初歩的な手法について解説しています。QGISと連携してデータを作成するため、QGISの基本操作やJavaScriptについて理解のある方を対象とします。QGISで簡単にファイルを出力したい方は、QGISで作成の項目を読み進めてください。
本教材を使用する際は、利用規約をご確認いただき、これらの条件に同意された場合にのみご利用下さい。
Menu
D3.jsとは
D3.js(Data-Driven Documents)は、データをビジュアライズするためのJavaScriptライブラリです。様々なグラフの作成やアニメーションを付けた表示などができます。また、GISデータにも対応しているため、地図のビジュアライズにも用いることができます。D3.jsでどんなことができるかを知りたい方は、D3.jsのGalleryを参照してください。
人口表示地図の作成
D3.jsの利用方法について、人口表示アプリ(完成例)の作成を通じて解説します。解説ではe-statからダウンロードした熊本県球磨郡相良村の世界測地系のシェープファイルをGeoJSONファイルに加工して使用しています。前半では実際にコードの記載方法を紹介し、後半ではQGISのプラグインで地図を作成するする方法を解説します。
GeoJSONの出力
GeoJSON形式のデータをD3.jsで読み込むため、QGISでデータ変換を行う。ダウンロードした相良村のシェープファイルを読み込み、名前を付けて保存からGeoJSONを選択し、地理座標系で出力する。
地図の表示
index.htmlと同じディレクトリにGeoJSONを配置(以下では、s3.geojsonと表記
)する。また、ローカル環境でのindex.htmlの表示にはローカルサーバーを立ち上げる必要があるため、任意のものを準備する。
D3.jsのインポートとWeb pageの説明
以下のようにindex.htmlを記述していく。
<!DOCTYPE html>
<head>
<meta charset="utf8">
<title></title>
<meta charset="UTF-8">
<script src="https://d3js.org/d3.v6.min.js"></script>
<style>
svg{width:700px; height:700px; border:1px; background-color: white; text-align: left;}
path{fill:white; stroke:black; stroke-width:0.25;}
h1,p {text-align: left;}
</style>
</head>
続けて以下のような紹介文を記載する。
<body>
<h1>熊本県球磨郡相良村の人口マップ</h1>
<p>地図をクリックすると人口が表示されます。<br>※濃い緑の地域には、人が住んでいません。</p>
<!--
ここに<script></script>が記載される。
-->
</body>
次に、表示設定(描画範囲、プロジェクション、パス)を記載していく。
<script>
//drawing area
var width = 500;
var height = 500;
// add svg
var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
//projection
var projection = d3.geoMercator()
.center([131.00,32.26])
.scale(100000)
// path
var path = d3.geoPath(projection);
</script>
GeoJSONファイルを用いて、地図を表示する。
// loarding geojson
d3.json("s3.geojson").then(function(json) {
svg.append("g").selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
ブラウザで表示して以下のようになっていることを確認する。
単色塗りと値による塗り分け
d3.json("s3.geojson").then(function(json) {
svg.append("g").selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.style("fill","red") //styleの記述を追加し単色で地図を塗りつぶす
});
.style
の記述を変更し、人口の値によって配色をかえる。ここでは、人口0の場合を緑とし、それ以外を薄い緑とする。人口の値は、GeoJSONの属性値を参照する。
.style("fill",function(d,i){
if(d.properties.JINKO=="0"){
return "#298A08";
}
return "#CEF6CE";
})
});
上記のように記述すると以下のようになる。
人口を表示する機能を追加
.styleの下に以下を記述し、alertでクリックした地点の大字名と人口を表示する。
.on('click', function(event,d){
alert(d.properties.MOJI+"の人口は"+d.properties.JINKO+"人です。")
})
});
マウスオーバーとアウトの機能を追加する。
選択する場所を分かりやすくするために、マウスオーバーとアウトの機能を追加します。
.on('mouseover', function(){
d3.select(this)
.style("fill","yellow")
})
.on("mouseout", function(d,i){
d3.select(this)
.style("fill",function(d,i){
if(d.properties.JINKO=="0"){
return "#298A08";
}
return "#CEF6CE";
})
})
});
表示例とサンプルコード
上記のように記述していくと、以下のようにindex.htmlを表示できます。
QGIS(2系)で作成
QGISには、D3.jsを使って簡単に地図アプリケーションを作成できるプラグインがあります。以下では、d3 Map Rendererを用いて、ベースファイルを出力する手法と出力したファイルの編集手法について解説します。
d3 Map Rendererとベースファイルの作成
ダウンロードしたシェープファイルを読み込んで、QGISで表示する。プラグイン>プラグインの管理とインストール
から、d3 Map Renderer
をインストールする(表示されない場合は、設定>実験的プラグインも表示する
にチェックをつける)。
WEB(W)>d3 Map
をクリックし、パラメータを指定する。
- 任意のタイトルを入力する。
- 入力したレイヤを指定する。
- ProjectionをMercatorにする。
- 出力するフォルダを指定する。
次のタブをクリックする。
Allow zoom and panにチェックをする。
- Include a legendにチェックをする。
次のタブをクリックする。
Include information popup にチェックをする。
- ポップアップで表示したい項目(人口、面積、大字名等)にチェックをする。
- OKをクリックする。
ローカルサーバーを立ち上げ、出力したindex.htmlを開くと作成したファイルが表示される。
ベースファイルの編集
以下では、出力したベースファイルの編集手法について、人口で表示を変える場合を例として、解説しています。
属性値と対応した配色の変更
出力時に凡例を整えて出力している場合は、この項目を読み飛ばしてください。今回は人口ありのエリアとなしのエリアで色を変えて出力します。人口ありとなしのエリアの色をつけるため、css>color.css
を開き.10r1を追加する。
.l0r1 { stroke: #000000; stroke-width: 0.26; stroke-opacity: 1.0; stroke-dasharray: ; fill: #0094f6; fill-opacity: 1.0; }
JSONファイルを開き、510001019以外を10r0から10r1にかえる。テキストエディタで、10r0を10r1に置換してから、510001019を検索し10r1から10r0にする。
{ "type": "Feature", "properties": { "KEYCODE1": "510003012", "d3Css": "l0r1" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 130.8038044790141, 32.233847444567672 ]]]}}
//コードは省略しています。
凡例の修正
凡例が表示されない場合は、data>legend.cssを開き以下のよう編集にする。
Width,Height,Color,Text
20,20,l0r0,相良村人口なしエリア
20,20,l0r1,相良村人口ありエリア
属性を日本語にする
属性名が日本語になっていないため、以下のように編集し日本語にする。
<div id="template" style="display: none">
<!--Tooltip template-->
<table>
<tr><td>面積</td><td>{AREA}</td></tr>
<tr><td>人口</td><td>{JINKO}</td></tr>
<tr><td>市町村</td><td>{CSS_NAME}</td></tr>
<tr><td>大字</td><td>{MOJI}</td></tr>
</table>
</div>
編集したファイルの表示
上記の箇所を編集すると下記のように表示できます。
参考書籍・ページ
本教材は、公式ページの他に、以下の書籍とページを参考に作成しました。
- 古籏一浩(2014)『データビジュアライゼーションのためのD3.js徹底入門』SBクリエイティブ
- d3.js (v5) を使って白地図を描く