GUNMA GIS GEEK

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

*

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

     - d3.js ver.3, datavis, Google Map API

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

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/オープンデータ/可視化

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

 - d3.js ver.3, datavis, Google Map API

Comment

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

  関連記事

D3.jsで再利用可能なコードの書き方を教えてくれる参考書

Developing a D3.js Edge D3.jsを取り扱った参考書とし …

大阪市 ひったくり事件発生個所
大阪市のオープンデータを使って、ひったくり事件発生個所を視覚化してみた。

[2016/6/8 data update] 以前、大阪都構想住民投票結果の地図 …

群馬県 地域別対前月人口増減
群馬県 地域別対前月人口増減

example 先週末のもくもく会で作っていたページです。 週末もくもく会 in …

streetviewcamerapov
ストリートビューのカメラの向きを自動的に調整する

まぁ、上記の画像で全て説明しているのですが。 Google のストリートビューは …

【D3.js】 viewBox属性を使ったPan/Zoon

ドラッグで移動、ホイールで拡大縮小が行えます。 [crayon-58839821 …

ベクトルタイルマップ
[D3+Leaflet]国土地理院さん渾身のベクトルタイルで遊んでみた。

ベクトルタイルの提供実験について|国土地理院 FOSS4G 2014 Hokka …

D3.jsの最新情報と解説記事を配信「Daily D3」

Daily D3 D3公式サイトや多数の海外ドキュメントなどの翻訳を手掛けていら …

高速道路 開業時系列表示
日本に高速道路が出来るまで

Japan and her National highways. というGif画 …

sponsor:転職ならen派遣ならen インタラクティブ・データビジュアライゼーション――D3.jsによるデータの可視化
「インタラクティブ・データビジュアライゼーション」D3.jsのイチオシ参考書が出版されます

オライリーより、2月19日にD3.jsの入門書「インタラクティブ・データビジュア …

Summer Wars - WorldClock
【D3.js】サーマーウォーズのワールドクロックを作る

アノ時計っぽいものを作ってみました。 example 解説 基本的には下記事のコ …