MENU

jQuery(というかJavascript)でヒートマップ(っぽいもの)を作ってみたよ。

普通のデザイナーさんならFlashで作るんでしょうがね(^^ゞ
特に難しいことはやってないんだけど、ネット上で探してみても誰もやってなさそうなので晒してみましたよ。

※白地図は「白地図、世界地図、日本地図が無料【白地図専門店】」から拝借。ちょっと古いみたいで、八女市が合併前の地図になってます。
※ヒートマップのデータは「福岡県警察 交通事故統計資料」の平成23年9月末現在のデータより、事故件数を拾ってます。

ソースは続きで。

<div id="map-canvas" style="position: relative;margin:0;padding:0;">
	<img src="heatmap.png" style="height:849px;margin:0;padding:0;width:600px;" />
</div>

こんな感じでHTMLに地図を配置して、

次のJavascriptにて丸(の透過PNG)を描画していきます。head内にね。
透過PNG使ってる時点で「Fuck IE!!」な感じですので今後とも宜しくお願いいたします。
ハックに長けている人は、CSSでbackground-colorやらradiousやらopacityやらをゴニョゴニョやったらできると思いますよ、知らんけど。

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
var position = {
	'40101' : {'ja': '北九州市門司区', 'x': 464, 'y': 197, 'count': 562},
	'40103' : {'ja': '北九州市若松区', 'x': 367, 'y': 195, 'count': 432},
	'40105' : {'ja': '北九州市戸畑区', 'x': 408, 'y': 204, 'count': 367},
	'40106' : {'ja': '北九州市小倉北区', 'x': 419, 'y': 214, 'count': 1773},
	'40107' : {'ja': '北九州市小倉南区', 'x': 413, 'y': 261, 'count': 1405},
	'40108' : {'ja': '北九州市八幡東区', 'x': 396, 'y': 225, 'count': 483},
	'40109' : {'ja': '北九州市八幡西区', 'x': 368, 'y': 234, 'count': 1753},
//(中略)
	'40642' : {'ja': '吉富町(築上郡)', 'x': 565, 'y': 372, 'count': 27},
	'40646' : {'ja': '上毛町(築上郡)', 'x': 551, 'y': 412, 'count': 43},
	'40647' : {'ja': '築上町(築上郡)', 'x': 492, 'y': 370, 'count': 82},

	'40421' : {'ja': '桂川町(嘉穂郡)', 'x': 328, 'y': 265, 'count': 0}
};

$(document).ready(function(){
	for (var area in position) {
		var imgTag;
		if (position[area].count > 1700) {
			imgTag = 'red';
		} else if (position[area].count > 1000) {
			imgTag = 'yellow';
		} else if (position[area].count > 300) {
			imgTag = 'green';
		} else {
			imgTag = 'blue';
		}
		
		var wh = 80;
		imgTag = '<img src="' + imgTag + '-circle.png" id="heat-' + area + '" style="height:' + wh + 'px;margin:0;padding:0;position:absolute;width:' + wh + 'px;" />';
		
		$('#map-canvas').append(imgTag);
		
		$('#map-canvas #heat-' + area).css({
			'top': position[area].y - wh / 2,
			'left': position[area].x - wh / 2,
			'z-index': position[area].count
		});
	}
});
</script>

以上。終わり。

まぁ余談ですが、座標データは自前でポチポチ取得してます。

<div id="controller">
CODE: <input type="text" id="code" value="" size="30" />
</div>

って感じでコピペ用のテキストボックスを用意して、

$(document).ready(function(){
	$('#map-canvas').click(function(e) {
		$('#code').val("'x': "+(e.clientX - $(this).position().left)+", 'y': "+(e.clientY - $(this).position().top));
		$('#code').focus().select();
	});
});

ってやっとけば、楽に座標を取得できますよ、と。

あとはJSONデータを外部から読み込むようにして、もう少し丸の画像をオサレにして、なんかモヨモヨ動くようにでもしたら納品レベルになるかいな??