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

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

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

ソースは続きで。

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

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

以上。終わり。

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

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

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

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

スポンサードリンク