GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ。

*

福岡市のオープンデータを使用して交通危険個所マップを作成しました。

     - d3.js, datavis, Google Map API

  • このエントリーをはてなブックマークに追加

Civic Tech Advent Calendar 2013 11日目 参加記事です。

Civic Tecとはなんぞや?という方はこちらを。


最近のオープンデータ促進の流れを受けて、いくつかの自治体でデータの公開がおこなわれています。
その中の一つ、福岡市のオープンデータ(サンプル)にて公開されている交通危険個所データをGoogle Map上にヒートマップとして表示してみました。

fukuokaTrafic2

example
SVGを使用しているので、IE9以上Chrome推奨です。

データの入手元は以下です。
福岡市サンプルデータサイト I02交通危険箇所、D01小学校

以前、福岡市のサンプルデータを使用して「防犯危険箇所ヒートマップ&ボロノイ図」を作成したことがあるのですが、今回はもう少し実用的なものができないか試してみました。

使用用途としては、小学校までの通学路上の交通危険個所のチェックを想定してます。

Google Map上に、交通危険個所のヒートマップと現在の交通状況を表示しルート検索(徒歩)を行えるように、また、ヒートマップのポイントをクリックした際にその場所のストリートビューを表示することで、危険個所の景色を確認できるようにしてみました。
(一部、ストリートビューが対応していない場所があります)

Google Maps APIのヒートマップレイヤはクリックイベントが取得できないようなので、イベント取得のためだけにD3を使って地図上に透明なcircleを重ねてます。

通学路データなどがあれば地図上に重ねてみることで通学の際の注意しなくてはならない場所などを確認しやすくなるのではないかと思って探してみたのですが、残念ながら公開されてはいないようなので代わりにGoogle Mapのルート検索を付けました。

その他に国土数値情報から取得した小学校区ポリゴンをFusion Tablesを使ってオーバーレイしてみたりもしたのですが、地図が見づらくなっただけだったのでやめました。ソースコードにその痕跡が残っているので、興味ある方はご覧になってください。

こういった危険個所データはとても実用的なので、各自治体で本格的に提供されるようになると嬉しいですね。一緒に、道路照明灯の位置データとか公開してくれるといろいろ分析ができて面白いかもしれません。

その他の関連記事
D3.js/オープンデータ/可視化

 - d3.js, datavis, Google Map API

  • このエントリーをはてなブックマークに追加

Comment

  1. […] 、例えば、交通危険個所データを使って、Google Map上にヒートマップとして表示したりしている人も居ます。 […]

  関連記事

streetview000001
[GMaps API v3] ストリートビューを使う。

ストリートビュー、27市町村も対象に グーグル 群馬 グーグル グッジョブ! ( …

hummer & d3
D3.jsとHummer.jsを組み合わせてスマートフォン対応を行う

もともと、D3ではdragビヘイビア/zoomビヘイビアがスマートフォンの操作に …

D3.js GoogleMap Voronoi Diagram
【D3.js】Google Map上にボロノイ図を描く

前の記事では、ガソリンスタンドの位置情報を用いて高崎市の地図上にボロノイ図を表示 …

夏バテ
D3.jsを用いて作成されたデータビジュアライゼーション事例まとめ。

絶賛、夏バテ中です。 ここ数日間は、ホント「仕事して寝る」の繰り返しでブログに書 …

d3linechart000002
【D3.js】おさらい2回目 線グラフ

棒グラフに続いて、今回は(折れ)線グラフを作成します。 前回説明した内容について …

Squaire.js
【D3.js】同じ面積の四角形で地図を描くプラグイン「Squaire.js」

最近アメリカのニュースサイトなどで見かけることが多くなった等面積の四角形で行政区 …

pixel2latlong
【D3.js】クリックした位置の緯度経度を求める

小ネタ。 example pixel座標と緯度経度の変換を行います。 サンプル …

阪神・淡路大震災「1.17の記録」位置情報付加
[Fusion Tables]阪神・淡路大震災の記録写真(オープンデータ)に位置情報付加してみた。

阪神・淡路大震災「1.17の記録」の画像情報一覧ファイル(20150120101 …

hhMQ
【D3.js】 Layout sample1

D3.jsのLayout機能のサンプルです。 こちらで作成した関数を使っているの …

D3 geo Hello World!
D3 Geo Hello World!

GitHub shimizu/d3_geo_helloworld Githubに …