日本の地図データ(国土数値情報)を使い、地図を表示する

2015年10月26日

世界地図を表示したので、今回は日本国内の地図を表示します。サンプルコードにコメントを付しましたので、そちらをご覧ください。

地図データは国土数値情報ダウンロードサービス

手順：
１．上記のリンクより表示したい都道府県の数値情報をダウンロードする。
２．QGISソフトなどでダウンロードした.shp→.geojsonファイルへ変換する。
　その際、ダウンロードした.shpファイルはSHIFT-JSになっているので、geojsonファイルへ
　保存するときはUTF-8へ変換することを忘れないでください。

サンプルコードの実行結果はこちら

<!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()
			.center([139.189, 35.3697])
			.scale(40000)
			.translate([200,320])
		); // パスと投影方法を指定

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

	d3.select("#map")
		.selectAll("path")
		.data(pref.features)
		.enter()
		.append("path")			// パスを追加
		.attr("d", path)		// 地形データを設定
		.style("fill",function(d,i){

		/*
			国土数値情報の行政区域データでは、市町村名は
			propertiesオブジェクトのN03_004プロパティに
			格納されています。N03_004プロパティの文字列を末尾から
			検索して、市町村を判定する。
		*/
			if( d.properties.N03_004.lastIndexOf("市") > -1 ){
				// 市なら空色
				return "skyblue";
			}
			if( d.properties.N03_004.lastIndexOf("村") > -1 ){
				// 村なら黄色
				return "yellow";
			}
			if( d.properties.N03_004.lastIndexOf("町") > -1 ){
				// 町ならピンク
				return "pink";
			}
			return "gray";
		});
});// 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()

.center([139.189, 35.3697])

.scale(40000)

.translate([200,320])

); // パスと投影方法を指定

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

d3.select("#map")

.selectAll("path")

.data(pref.features)

.enter()

.append("path") // パスを追加

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

.style("fill",function(d,i){

国土数値情報の行政区域データでは、市町村名は

propertiesオブジェクトのN03_004プロパティに

格納されています。N03_004プロパティの文字列を末尾から

検索して、市町村を判定する。

if( d.properties.N03_004.lastIndexOf("市") > -1 ){

// 市なら空色

return "skyblue";

}

if( d.properties.N03_004.lastIndexOf("村") > -1 ){

// 村なら黄色

return "yellow";

}

if( d.properties.N03_004.lastIndexOf("町") > -1 ){

// 町ならピンク

return "pink";

}

return "gray";

});

});// d3.json()

-D3.js
-国土数値情報, 地図表示

comment コメントをキャンセル

: D3.js

散布図にグリッドを表示してみる

目盛りの表示は何度もしました。散布図でも縦軸、横軸を表示しました。今回は、グリッド(マス目)を表示します。 D3.jsでは、rangeメソッドを使うと範囲の値を自動的に生成します。 [crayon- ...

D3.js

パックレイアウトで人口を表す

今回はパックレイアウトを使い日本の人口を表示します。サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>パックレイアウトで人口を表示する</title>
	<script src="../js/d3.js"></script>
	<style>
		svg{
			width:320px;
			height:320px;
			border:2px solid black;
		}
		circle{
			stroke:none;
			opacity:0.25;
		}
		text{
			font-size:10px;
			text-anchor:middle;
			fill:black;
			opacity:0;
		}
	</style>
</head>
<body>
	<h1>パックレイアウトを表示</h1>
	<svg id="graph"></svg>
	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>パックレイアウトで人口を表示する</title>

<style>

svg{

width:320px;

height:320px;

border:2px solid black;

}

circle{

stroke:none;

opacity:0.25;

}

text{

font-size:10px;

text-anchor:middle;

fill:black;

opacity:0;

}

</style>

</head>

<body>

<h1>パックレイアウトを表示</h1>

</body>

</html>

[crayon-662aefeb6475d94 ...

: D3.js

SVGとは

SVGとはScalable Vector Graphicsの頭文字をとったもので、ベクトルベースのグラフィックを描画するためのマークアップ言語です。マークアップ言語といえばHTML/XMLを思い浮 ...

: D3.js

データの追加と更新

データの追加処理要素にデータを追加してグラフを表示するプログラムは何度も出てきています。データの数に応じて要素を追加するにはenter()メソッドを使います。実際に要素を追加するにはappned() ...

D3.js

２次元配列のデータを読み込んで、折れ線グラフを表示する

２次元配列のデータを用意して、少し複雑なデータを読み込んで折れ線グラフを表示してみます。サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>折れ線グラフの線を色々な形にする</title>
	<script src="../js/d3.js"></script>

	<style>
	svg{
		width:400px;
		height:300px;
		border:2px solid red;}
	.line{fill:none; stroke:black;}

	.axis text{font-size:11px;}
	.axis path,
	.axis line{ fill:none; stroke:black;}
	.axisX line{fill:none; stroke:black;}

	.red  { stroke: red;}
	.blue { stroke: blue;}
	.green{ stroke: green;}
	</style>

</head>
<body>
	<h2>折れ線グラフの線を色々な形にする</h2>
	<svg id="graph"></svg>
	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>折れ線グラフの線を色々な形にする</title>

<style>

svg{

width:400px;

height:300px;

border:2px solid red;}

.line{fill:none; stroke:black;}

.axis text{font-size:11px;}

.axis path,

.axis line{ fill:none; stroke:black;}

.axisX line{fill:none; stroke:black;}

.red { stroke: red;}

.blue { stroke: blue;}

.green{ stroke: green;}

</style>

</head>

<body>

<h2>折れ線グラフの線を色々な形にする</h2>

</body>

</html>

[cray ...

地球を表示する

フォースレイアウト