画像

WEB+DB PRESS Vol.76 のD3.jsの記事をちょっと試したかっただけだったの
です。

WEB+DB PRESS Vol.76 amazon.co.jp

D3.js自体は記事のとおりに書けば理解出来ましたが、「過去1000件の
Foursquareチェックイン履歴」を取ってくるのに難儀しました。記事では
さらっと書いてあるだけですねw

どうにかしてoauth_tokenを取得する

私は http://tdoc.info/foursquare-API/authentication.html を参考にし
て、泥臭く手に入れました。Twitterだと簡単なのにね。

  1. https://developer.foursquare.com/ にアクセスし、適当なマイアプリを作る。

  2. 以下にアクセスし、“code"を取得する(長いので改行入れてます)。

https://foursquare.com/oauth2/authenticate?client_id=<Client ID>
&response_type=code&redirect_uri=<Redirect URI>
  1. ブラウザのアドレスバーに"code"が表示されるので、以下にアクセスす
    る(長いので改行入れてます)。
https://foursquare.com/oauth2/access_token?client_id=<Client ID>
&client_secret=<Client secret>&grant_type=authorization_code
&redirect_uri=<Redirect URI>&code=<2で取得したコード>
  1. oauth_tokenを取得出来た！
{"access_token":"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"}

過去1000件のFoursquareチェックイン履歴を取得する

  1. foursquare2 gemをインストールする。

% gem install foursquare2

  1. 取得できるか確認。

  2. JSONフォーマットにしつつ、緯度と経度を取得する。
    https://developer.foursquare.com/docs/users/checkins によると、
    250ずつしか取得できないようなので、小分けにして取得。

こんなデータが取得できるはず。

[
{"coordinates": [139.645709, 35.667857]},
{"coordinates": [139.645709, 35.667857]},
{"coordinates": [139.641393, 35.666568]},
...
]

エラー吐いて972件しか取得できなかったけど、まあ良しとする。
JSONなので最後の”},“を”}“に置換するのを忘れずに。。

D3.js使って可視化

ここまでくれば記事のとおりにコードを書くだけです。こんな感じ で可視
化出来ます。ドラッグやズームイン・アウトにも対応しています☆

これ試したのは少し前なので忘れてましたが、日本地図を作るのもやや面
倒でした。Homebrewでgdalをインストールするのにかなり時間がかかると
いう。。

D3.jsの本

PDF版は無料で入手することが出来ます。
[を] 【書評・感想】Getting Started with D3 eBook

こちらはKindle版です。

Getting Started with D3 amazon.co.jp