ゆっくりのんびり。

いの (@inox_ee) です

【後期実験】「情報可視化とデータ解析」を終えて

まえがき

こんにちは、いのでんです。
3年後期になりぼちぼち忙しい日々を送っていたわけですが、ついに後期実験も終わりほぼ冬休みな状態です。やったね! とか言ってる間に試験期間になりました。つらい。
実験終了して1ヶ月くらい経ちますが、実験最後のタームで行った「情報可視化システム」について書いていこうと思います。次年度の参考になるかはわかりません。

「情報可視化システム」とは?

近年、世に溢れるデータの数は爆発的に増え、「ビッグデータ」や「Deep Learning」が巷で話題となっております。この実験では、そんな大量にある情報を集積し、より見やすく秩序立て、有意な知見を得られるようにするにはどうしたらよいか、を考える講義となっております。間違ってたら不可来そう。

2〜3人のチームに分かれ、実験10日分(週3回なのでおよそ3週間)の期間で1つ可視化システムを作り、最終日にプレゼンを行います。プレゼンの日は大手企業の方もいらしており、優秀者には特典があるかも?フツーにめっちゃ緊張しました。

何を作ったか

我々のチームは終電情報可視化システムの「しゅうでん!」を作りました。

  • 動機 : ふつうに便利そう
  • 目的 : ある出発駅に対し、任意の到着駅への時刻を色分けし、鉄道の利用状況や都市の発展との相関を見る
  • ターゲット : なにかと終電を利用することが多い大学生や社会人

成果物は以下のURLから見ることができます。

https://inox-ee.github.io/infovis18_shuden/

(データはライセンス的に怪しいので品川.csvのみ載せてあります。よって「品川」と検索した場合のみ色付けが開始されます。)

機能紹介

  1. 右上の検索ボタンから出発駅を指定すると色分けを開始します。
  2. 出発駅から各駅エリアまでの経路に対して終電まで1時間以上なら終電まで1時間以内なら(時間が無くなるほど濃くなる)、終電が終わってしまったならに塗り分けられる。
  3. デフォルトでは現在時刻を取得し、右下のスライドバーで±1時間の変化を見ることが可能。切り替えボタンを押すと、入力して指定することも可能。
  4. GPSボタンからは、現在地を取得し最寄駅を提案してくれる。
  5. レスポンシブデザインに考慮し、スマホからでも見やすいデザインに設計。

苦労した点

おそらく一番重労働となったのはデータ収集でしょう。(ライセンス的にやや怪しいですが)某路線検索サイトをスクレイピングし、出発時刻と到着時刻を取って来るだけ…のはずが、入手した駅一覧のデータと検索サイトの駅名とが一致しない・冬季限定運行の駅も含まれていた・同駅名が意外と多い などの問題が発生。さらにAzureが使えず手持ちのマシンでクローラーを回すことに…….
無事に関東2000駅のデータを取り終えたチームメンバーに感謝です。

また、当然ながら取得したデータの見せ方も悩みました。都市部と地方とで駅密度は大きく異なり、一目で分かるようどんな手法を取り入れるか……。最終的に、d3.jsにも標準機能として搭載されていたボロノイ図を用いました。これは二次元平面上では、複数個の点に対して各々の母点の二等分線で領域の境界を結んでいくというものです。これを用いることで地方は1駅あたりの領域を大きく、都市部では小さくとることができます。数学の雑学が思わぬところで役に立ちますね……

そのほかにも、可視化・インタラクションの7つの原則である

  • Select/Focus:マップ上にボロノイ図を描画する
  • Explore:スライドバーによる検索時間の変化
  • Reconfigure
  • Encode:色塗りによる時間表現
  • Abstract/Elaborate:ホバー時、ポップアップによる追加情報の表示
  • Filter
  • Connect

を意識し、作成しました。

反省点

正直に申し上げると、あまり有益な情報は得られませんでした。「〇〇線の終電はかなり遅い」だとか「東京の東部と西部で大きく異なる」と言ったような有意な差が見られず、凡そ結果と呼べるものが少なかったかもしれません。原因として考えられるのは以下の通り。

  • 実験結果とその原因への仮説検証の不十分さ
  • 用いたデータの単一性
  • 可視化表現の単一性

これらの反省点から導びけるのは、やはり「このデータを可視化して何が得られる(or何を得たい)のか」が明確ではなかったことにつきるでしょう。HCIの分野では、「何をテーマにしたか」を聞いただけで(その後の手法や結果がどうであれ)学会に論文が通るか否かがおおよそ目星がつくそうです。

またデータ解析とは別に、システムの応答時間の短縮も、ユーザビリティを考慮したときに非常に重要な因子になる[1]ことを感じました。
地図・路線・駅・ボロノイ図と複数のデータをレンダリングする際は、読み込みや描画の方法を十分に考慮しなければならない。たとえばGoogle Mapのように、地図をタイル分割し、範囲を限定して読み込み・レンダリングを行うといった工夫もあります。フロントエンドに興味がある自分にとって、一度勉強しなければならないなぁと思っています。

[1] Judy Chuan-Chuan Lin, & Hsipeng Lu (2000). Towards an understanding of the behavioural intention to use a web site. International Journal of Information Management, Volume 20, Issue 3, Pages 197-208

最後に

この実験は、短い期間でインタラクションの基礎を学び、実際にデータを収集し、システムを開発するところまで行くため、非常にハードな実験でした。多少なりともPythonJavaScriptの知識がないときついかもしれません(と言ってもJS初学者が自分よりも圧倒的に良いものを作ってしまうのが弊学科ですが…)。
ですが、担当教授が基礎からデータ可視化を指導していただけることや、オリジナルのwebアプリ(?)を開発できるので、得られるものはとても大きかったなと感じています。来年も開講されたら、是非挑戦されてみいかがでしょうか。