S.F. Page

Programming,Music,etc...

東京メトロ オープンデータAPIをいじる (2) - d3 + ectでレンダリングしてみた。

何とか描画することができた。

何とか路線図を描画できた。えらい時間がかかってしまったが。。

https://ywr1ag.dm2301.livefilestore.com/y2pdwt7rM3zptyrZTehfPsTqfewYNp9G962OpizefO6iXP4fHxO2J56g3p7hTqHdxqd7XzQVXOxkE9UXyhTl7B1YPIP8qD5P7CtP5J87-KlLEM/2014100401.png?psid=1

実際にSVGで描画したサンプルはこちら。

node.jsでAPIを呼び出し、d3.jsで東京都の境界情報と路線図をsvgで生成、最終的なレンダリングはectで行っていて、それを静的HTMLファイルとして保存している。

Qのおかげで非同期プログラミングがとてもわかりやすくできるのが実感できている。Promise万歳!である。

GitHUBレポジトリ

ハマったポイントは2つ。

APIの呼び出し間隔制限か、同時呼び出し制限にひっかかりエラーになる。
ループ中で非同期でAPIを呼び出すと呼び出し間隔が極端に短くなり、呼び出し間隔制限か、同時呼び出し制限にひっかかりエラーになる。これを回避するために非同期呼び出しのチェーンを行って直列化し、同時呼び出し回数の抑制を行った。具体的な方法はこちらに書いてある通りである。あとはQ.delay()を間に挟んだりして呼び出し間隔の調整を行っている。
d3.data()の引数は配列で渡す。
これは単純ミス。配列でない場合はd3.datum()で渡すらしいんだけれども、なんかうまくいかなかったんだよねぇ。

つぎは駅情報・列車位置情報を表示してみようかなと思っている。