waigani's diary

QGISを中心にFOSS4Gをいじくる

CartoDB Torqueを使ってみよう

オープンでよかった

FOSS4G Seoulでleafletの開発者 Vladimir Agafonkinさんがいらっしゃったので、ちょこっとleafletの質問をしてみました。詳細はナイショなんですが、その中で「CartoDBのtarqueを使うのがいい」とのアドバイスも頂きました。Vladimir AgafonkinさんMapboxの人なのですが。FOSS4GはMapboxの人からCartoDBを教えてもらえる、とっても優しくオープンな世界です。
折角教えてもらったし使ったことなかったので、CartoDBで地図作ってみました。

CartoDB Torque

位置情報を持ったデータをCartoDBに入れることで簡単に可視化できます。特に日時の情報を含むポイントデータであれば、torqueを使うことでアニメーション表示することができます。データさえ用意してしまえば簡単なので試してみましょう。

データの準備

日付を含むオープンデータが何かないかなと探していたところ、
 大阪市の犯罪発生情報
があったのでこれを使います。
平成25年~平成27年の"ひったくり"データをダウンロードしてきましょう。
ダウンロードしてきたままだと、下記のようなフォーマットです。

市区町村,町名,丁番,罪名,既遂未遂別,手口,ひったくり区分,年,月,日,時間,被害者の性別,被害者の年齢
大阪市北区,曾根崎,2丁目付近,窃盗,既遂,ひったくり,自動二輪,2013年,2月,24日,2時頃,女性,30代
大阪市北区,中崎,3丁目付近,窃盗,既遂,ひったくり,自動二輪,2013年,3月,6日,1時頃,女性,30代
大阪市北区,中崎,2丁目付近,窃盗,既遂,ひったくり,自動二輪,2013年,4月,19日,20時頃,女性,30代

3年分のデータを1ファイルにして、必要な情報のみ抜き出しました。
住所は1カラムにまとめています。また、年月日についても1カラムにまとめました。

大阪市北区曾根崎2丁目,自動二輪,2013/2/24
大阪市北区中崎3丁目,自動二輪,2013/3/6
大阪市北区中崎2丁目,自動二輪,2013/4/19

この状態では地図上にマッピングできませんので、住所から経緯度への変換が必要になります。変換には、東京大学空間情報科学研究センターが提供するCSVアドレスマッチングサービスを使用しました。
アドレスマッチングの結果、経度、緯度、マッチングレベルが追記されたファイルが作成されます。詳細なマッチングが必要な場合は、マッチングレベルを確認して情報を使用するか/しないか、住所情報の見直しが必要になりますが、ここではこだわらないことにします。

大阪市北区曾根崎2丁目,自動二輪,2013/2/24,大阪府/大阪市/北区/曽根崎/二丁目,135.50031,34.70002,5,6
大阪市北区中崎3丁目,自動二輪,2013/3/6,大阪府/大阪市/北区/中崎/三丁目,135.50510,34.70839,5,6
大阪市北区中崎2丁目,自動二輪,2013/4/19,大阪府/大阪市/北区/中崎/二丁目,135.50586,34.70853,5,6

CartoDBへのDataset作成

ユーザ作成工程は省略します。
Datasetsの画面から、"NEW DATASET"を選択します。
f:id:waigani:20150923211040p:plain

読み込むデータはDrag&Dropでブラウザに持ってきて指定できます。データを指定をしたら"CONNECT DATASET"を選択します。
f:id:waigani:20150923211733p:plain

読み込みが終わるとDATASET VIEWになり、データ内容が表示されます。
データセット名、フィールド名はダブルクリックすることで編集することができます。必要に応じてわかりやすい名称に変更しておきましょう。

  • field2がひったくりの区分
  • field5が経度
  • field6が緯度
  • field3が日付

であることを確認しておきます。特にfiled3はカラムのタイプが"date"になっていることを確認しておきましょう。"date"もしくは"number"のカラムを使ってしか、アニメーション表示はできません。
"date"になっていない場合は、新しいカラムを"date"で作成、SQLを使用してデータをdateに変換したうえでコピー、といった手順が必要になります。

さてdatasetを作成した際に一番重要になるのが、geometryのカラムです。ここを使って地図上へプロットを行います。今回のデータだと、読み込みが終わった段階ですべてnullになっています。オレンジの"GEO"ボタンからgeometryを設定します。
f:id:waigani:20150923212907p:plain

Longitude, Latitudeのカラムを指定したうえで、"CONTINUE"を選択します。
f:id:waigani:20150923213847p:plain
これでgeometryも設定された状態になります。

"MAPVIEW"に移動しましょう。
読み込んだデータがプロットされているのが確認できます。
f:id:waigani:20150923214227p:plain

wizardsを使う

プロットはされていますが、すべてのデータが同じ色で表示されている状態です。表現については、cartcssを自分で書いて細かく指定していくことも可能ですが、まずはwizardsを使用してみましょう。

CATEGORY

例えばcategoryを使用すると、簡単に凡例わけすることができます。
field2のひったくり区分を使用して凡例わけした例です。
f:id:waigani:20150923214800p:plain

TORQUE

アニメーション表示してみましょう。torqueを選んで、Time Columnを指定してあげるだけで、日時のスライダーが追加されます。TORQUE CATの方を使うと、凡例わけした状態にもできます。
f:id:waigani:20150923215810p:plain

HEATMAP

heatmapをアニメーション表示することもできます。HEATMAPを選んでおいて、animatedをONします。Time Columnを指定してあげましょう。
f:id:waigani:20150923220552p:plain

publish

表現を付け終わったら右上の"PUBLISH"を選択して公開用のURLや、埋め込み用のhtmlを作成することができます。
f:id:waigani:20150923221927p:plain

ここまで

ちょっと触ってみただけですが簡単にデータの可視化ができますね。
またCartoDBのすごいところはデータを見て表現をおすすめしてくるところです。いろいろなデータを上げて試してみましょう。