世界地図を表示する

地図のデータ形式にはいろいろなものがありますが、多くの地図データはshape形式(.shp)です。この形式はD3.jsでは扱うことができません。ほかに、JavaScriptで手軽に扱えるようにしたのがGeoJSON形式(.json)があります。D3.jsで使用する地図データの形式はGeoJSONになります。

GeoJSON形式のデータはｍ地図の種類。精度によりデータ量が多く、読み込みに時間がかかります。そこで、よりコンパクトなサイズの地図データの形式として登場したのがTopoJSONデータ形式です。これもJSON形式なので、JavaScriptから簡単に扱うことができます。

扱う地図データの入手元
●Natural Earth
こちら

●QGIS(.shpを.geoJSONに変換するツールの入手元)
こちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>世界地図をD3.jsで表示する</title>
	<script src="../js/d3.js"></script>
	<!--
		D3.jsで地図データを表示するには、はじめにprojectionライブラリを
		読み込ませなければなりません。このライブラリはD3.jsの後に読み込む。
	-->
	<script src="../js/d3.geo.projection.js"></script>
	<style>

	svg{
		width:640px;
		height:640px;
		border:1px solid black;
		background-color:#ffffff;
	}
	path{
		fill:white;
		stroke:black;
		stroke-width:1;
	}
	</style>
</head>
<body>
	<h1>世界地図を表示する</h1>
	<svg id="map"></svg>

	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>世界地図をD3.jsで表示する</title>

<!--

D3.jsで地図データを表示するには、はじめにprojectionライブラリを

読み込ませなければなりません。このライブラリはD3.jsの後に読み込む。

-->

<style>

svg{

width:640px;

height:640px;

border:1px solid black;

background-color:#ffffff;

}

path{

fill:white;

stroke:black;

stroke-width:1;

}

</style>

</head>

<body>

<h1>世界地図を表示する</h1>

</body>

</html>

/*
	世界地図を表示
*/
	// HTMLファイルで設定した#graphの幅、高さを取得する
	var svgEle = document.getElementById("map");
	var svgWidth = getComputedStyle( svgEle, null)
					.getPropertyValue("width");
	var svgHeight = getComputedStyle( svgEle, null)
					.getPropertyValue("height");

	svgWidth = parseFloat( svgWidth );   // 整数に変換する
	svgHeight = parseFloat( svgHeight ); // 整数に変換する

	var path = d3.geo.path()					// 地形のパスを生成
		.projection(
			d3.geo.mercator()					// 投影方法をメルカトル図法に設定
			.translate(
				[ svgWidth / 2 , svgHeight / 2] // 画面での表示位置調整
			)
			.scale(100)							// スケール指定
		);

d3.json("../geodata/world.geojson", function(error,world){

	d3.select("#map")
		.selectAll("path")	  // path要素指定
		.data(world.features) // データをセット
		.enter()
		.append("path")		  // path追加
		.attr("d", path)	  // 地形データを設定
		.style("fill",function(d,i){				// 各地域・国の色を指定
			if( d.properties.name == "Antarctica"){ // 南極の場合
				return "white";
			}
			if( d.properties.name == "Japan"){		// 日本の場合
				return "blue";
			}
			return "hsl(" + i + ", 80%,60%)";
		});

});// d3.json()

世界地図を表示

// HTMLファイルで設定した#graphの幅、高さを取得する

var svgEle = document.getElementById("map");

var svgWidth = getComputedStyle( svgEle, null)

.getPropertyValue("width");

var svgHeight = getComputedStyle( svgEle, null)

.getPropertyValue("height");

svgWidth = parseFloat( svgWidth ); // 整数に変換する

svgHeight = parseFloat( svgHeight ); // 整数に変換する

var path = d3.geo.path() // 地形のパスを生成

.projection(

d3.geo.mercator() // 投影方法をメルカトル図法に設定

.translate(

[ svgWidth / 2 , svgHeight / 2] // 画面での表示位置調整

)

.scale(100) // スケール指定

);

d3.json("../geodata/world.geojson", function(error,world){

d3.select("#map")

.selectAll("path") // path要素指定

.data(world.features) // データをセット

.enter()

.append("path") // path追加

.attr("d", path) // 地形データを設定

.style("fill",function(d,i){ // 各地域・国の色を指定

if( d.properties.name == "Antarctica"){ // 南極の場合

return "white";

}

if( d.properties.name == "Japan"){ // 日本の場合

return "blue";

}

return "hsl(" + i + ", 80%,60%)";

});

});// d3.json()