情報視覚化 - インタフェースの心理学

情報視覚化

　パソコンやWeb上で様々な大規模データを効率よく検索したり閲覧したくなる機会が増えてきました。大量のデータの性質や構造を理解したい場合、情報をわかりやすくユーザに提示し、必要な部分を効率的に調べる方法が重要です。大量の情報をうまく画面上に表示することによって理解を助けるテクニックを情報視覚化(Information Visualization)と呼びます。最近のパソコンやブラウザは大量のデータを扱えますし、ブラウザ上でJavaScriptを使って対話的に様々な図形を描画することが可能になったので、情報視覚化システムは近年とても身近になってきました。

　大量の情報を扱う場合、すべての情報を画面に表示することはできませんから、なんらかの方法で必要な部分だけを表示する工夫が必要です。情報の一部だけしか画面に表示できない場合、スクロールバーやメニューのようなGUI部品を使って表示部分を切り替える方法がよく利用されています。1000行のテキストを閲覧する場合や、1000個の項目の中からひとつを選択するといった程度のことであればスクロールバーやメニューで十分ですが、100万個の選択枝からひとつを選ぶような場合、スクロールバーでの作業はかなり困難なので、なんらかの検索手法や別の操作手法が必要になります。小さな画面上で必要な部分だけを効率的に調べるためには、余分な部分を表示しないようにするためのフィルタリング操作と、重要な部分を強調して表示するズーミング操作の組み合わせが有効です。このとき、必要な部分(フォーカスされた部分)を強調して表示するようなフィルタリング操作を行なった場合でも全体のコンテクストを理解できるような手法が有用だと考えられています。このような手法をFocus+Contextと呼びます。

情報視覚化の歴史

　情報視覚化の研究は1990年ごろからXerox PARCやUniversity of Marylandなどで盛んになりました。PARCでは様々な大量の情報を3次元空間にマッピングすることによって情報をひとつの2次元画面上に表示する手法などが研究されていました。3次元空間のデータを眺める場合、遠くにあるものは小さく見えますから、データをうまく配置すれば自然に沢山の情報を表示することができます。たとえば古い情報は3次元空間内の遠くの方に配置し、新しい情報は近くに配置すれば、CGに利用される3次元表示手法を使って、近くの新しい情報を大きく/遠くの古い情報を小さく表示することが可能になります。たとえばPARCで開発されたPerspectiveWallシステムでは、沢山のファイルを3次元空間上の「壁」に貼り付けることによって、注目している範囲の情報だけが大きく見えるようになっています。

https://www.youtube.com/watch?v=hYUZbrWtCZg

Perspective Wall

　1990年ごろは高速3次元表示が可能なコンピュータは高価だったので、このような研究を行なえる場所は限られていました。また、当時は視覚化が必要なほど大規模な情報も多くありませんでしたから、そのころ提案された情報視覚化手法はほとんど実用的に利用されることはありませんでした。一方、最近はどんなパソコンでも高速にグラフィクス表示を行なうことができますし、Web上の大規模なデータが簡単に入手できるようになってきました。パソコンの中にはかなりの量のファイルが入っているのが普通ですし、Web上には巨大なデータがあるので、情報視覚化の重要性は今後ますます高まっていくと考えられます。

データの種類と視覚化手法

　世の中の大規模データの多くは以下のようなカテゴリに分類できます。

階層型データ

住所の表記や生物の分類のように、大規模なデータを段階的に細分化して扱うデータを階層型データと呼びます。パソコンのファイルシステムも、フォルダの中にさらにフォルダを置くことを繰り返すことによって大量のファイルを扱える大規模な階層型データになっています。

大きなリストはなんらかの方法で分類を繰り返すことによって階層型データに変換することができます。たとえば電話帳データの場合、電話番号の1番目の数字/2番目の数字/... で分類すれば階層型データのように扱うことができます。

階層型ファイルシステムの憂鬱で説明するように、階層型データは普通の人間にとって決して使いやすいものではないのですが、現在最も広く利用されている点は重要です。

ネットワーク型データ

Webページのリンク関係やSNSの友達関係のような巨大なデータは階層的に管理することが難しく、データ項目間のリンク関係が重要になっています。このような構造のデータをネットワーク型データと呼びます。リンクがループを構成していない(リンクを辿っても自分に戻ることがない)ネットワーク型データは階層型データのように扱うことが可能です。

表データ

Excelで扱うデータのように、表のような型式で表現できるデータを表データと呼びます。名簿や書籍データベースのように同じ構造のデータが大量に並んだものは表データとして表現できます。

　それぞれの型式の大規模データに対して様々な情報視覚化手法が考案されてきています。

階層構造の視覚化

　階層型データのひとつであるパソコンのファイルシステムは様々な形で視覚化が行なわれています。フォルダをたどるごとにウィンドウを開くというのが標準的ですが、Windowsでは「TreeView」という視覚化手法もよく利用されています。

http://gyazo.com/55f4131d6736ed91e78f2cbcc838f05f.png

WindowsのTreeView

Treemap

左上図はMacで動作するDisk Inventory Xというソフトで私のホームディレクトリの中のファイルの大きさを視覚化したものです。このソフトでは、ファイルサイズに対応した大きさの矩形が描かれるようになっており、大きなファイルは大きな矩形で表現され、ファイルをまとめたフォルダも矩形として階層的に表現されています。

　また、左下図はWindowsで動作するSequoiaViewというソフトを使ってファイルの大きさを視覚化した例です。後発のDisk Inventory XはおそらくSequoiaViewに触発されたと思われるので外見がよく似ています。

http://gyazo.com/b8023bc4426a31f2b45e07708d93378e.png

Disk Inventory X

http://gyazo.com/98ea589016b4f473e84a07829ef0370a.png

SequoiaView

　階層的に配置した矩形の集合でファイルサイズを表現するという方法はUniversity of MarylandのHuman-Computer Interaction Lab (HCIL)で開発されたTreeMapというシステムがオリジナルです。ディスクの中にどんな大きさのファイルがどれほどあるのかはわかりにくいものですが、TreeMapのような方法を使うと大きなファイルの分布を直感的に把握することができます。

Sunburst

左上図は同心円を使ってファイルの階層と容量を表現するScannerというシステムで、左下図はOverDiskというシステムです。これはGeorgia TechのJohn Staskoの考案したSunburstという視覚化手法を実装したもので、Treemapと同じように階層型データのサイズ情報をわかりやすく表示できます。

http://gyazo.com/ca499bfccf56af10c500bf130b179f88.png

Scanner

http://gyazo.com/3357cc75a33df8bd83ddd3dae01c0f3a.png

OverDisk

Hyerbolic Tree

下図は大規模な階層構造を円板上に配置するHyperbolicTree ＊という情報視覚化手法の例です。HyperbolicTreeも1990年代にPARCで開発されたもので、現在注目しているノードを画面の中央に置き、その親ノードと子ノードをその周囲に配置することを繰り返すことによってすべてのノードを円板内に表示するというものです。中心から遠くなるほどノードやリンクを小さく表示することにより、どれほど大きなデータでも画面内におさまるようにすることができます。HyperbolicTreeは、PARCから分離したInxightというベンチャー企業でStarTreeという名前で販売されていましたが、2014年現在SAPの子会社のBusiness Objectsという会社で販売されています。

https://www.youtube.com/watch?v=8bhq08BQLDs

http://gyazo.com/3e5bdb97fce8b2a81d47aceb3a783634.png

Hyperbolic Tree

http://gyazo.com/dd6315efbef37720b282b507d5499071.png

ポアンカレ円盤にもとづく無限階層の表現

ネットワーク型データの視覚化

　大きなデータの項目の間のリンク関係をうまく視覚化できればデータの性質やデータの間の関係がより明らかになる可能性があります。たとえばSNSの友達関係を視覚化することができれば、人気のある人物が判明したり、思わぬ人間関係が明らかになったりするかもしれません。左の図は、杉本浩二氏が開発した、mixiのユーザの友達(「マイミク」)関係を視覚化するmixiGraphというシステムの出力の例です。友達が沢山いるのは誰か、とか幅広く友達がいるのは誰か、といった情報が一目瞭然になっていることがわかります。

http://gyazo.com/fa8f657c3d131d7514ba14e3b3cff85e.png

mixiGraph

　mixiGraphでは、沢山友達がいる人物は離れて表示され、人物が重なって表示されないように配置が工夫されています。リンクが多いネットワーク型データを視覚化する場合、どうしても情報ノードやリンクが重なってしまうことが避けられませんが、視覚化のアルゴリズムを工夫することによって見栄えをよくする研究が長年行なわれています。

　下の図は東京大学の豊田正史氏による、Webページのリンク関係の視覚化の例です(＊) 。ところどころに綺麗にかたまった球のようなクラスタが見えますが、これは実は「リンクスパム」と呼ばれる好ましくないサイトの集合体です。Webページ間が普通にリンクされている場合はこのようにリンクが集中することは無いはずですが、検索エンジン上のランキングを上げるために似たようなサイトを沢山作って相互にリンクすることによりエンジンから検索されやすくしようという迷惑サイトがリンクスパムです。ネットワークデータの視覚化システムを利用するとこのような迷惑行為がすぐに判明してしまいます。

http://gyazo.com/948f6cadcc08da8f4b051468fa42484b.png

リンクスパムの視覚化

表データの視覚化

　下の図は、普通のExcelでは扱いきれないほど大きな表データでもパソコンでの操作を可能にするTableLensというシステムです。Excelではあらゆるデータは数値や文字列で表現されますが、TableLensでは数値を1ドット幅の矩形の長さで表現するといった処理が可能なので、沢山の行がある表データでも小さな画面上に表現することができます。

https://www.youtube.com/watch?v=qWqTrRAC52U

http://gyazo.com/e6f7aa637f1e93e708b8a63f52c40ece.png

TableLens

データ型式の変換

　下の図は、アメリカの上院議員の投票行動を視覚化したもので(****)、赤いノードは共和党の議員/青いノードは民主党の議員を表現しています。もともとのデータは、誰がどの法案にどう投票したかという表型式のデータですが、議員Aが議員Bと似た行動をとったときにAからBへのリンクが存在すると考えると、議員をノードとするネットワーク型データに変換して扱うことが可能になり、ネットワーク型データの視覚化手法が利用できるようになるというわけです。民主党議員は全員同じような投票行動をしている一方、共和党議員は一匹狼的な行動をとるMcCain議員がいるなど、行動に幅があることがわかります。

http://gyazo.com/48ab0ee6b79784d72ab6eeed25edb5e7.png

上院議員の投票行動の視覚化

　このようなデータ変換を行なう場合は様々な計算やパラメタ調整が必要になります。たとえば、投票行動の類似度を計算する式が必要ですし、どの程度似た投票行動があった場合にリンクが存在するとみなすかを考えなければなりません。これらをうまく調整し、かつ適当な視覚化手法を適用した結果はじめて効果的な視覚化が可能になります。

　最近はWeb上の大規模データ(いわゆる「ビッグデータ」)を扱う「データサイエンティスト」が注目されているなど、大規模データを統計的に処理する技術が話題になっています。現在のところ、データの統計処理も視覚化処理も完全自動というわけにはいかず、人間にわかりやすい形に表現するためには様々なノウハウが必要です。データ処理技術と情報視覚化技術を統合的に活用する手法が重要になってくるでしょう。

　長年ユーザインタフェース研究の中心人物として活躍しており、情報視覚化の研究も数多く行なっているBen Shneidermanは、統計的データ処理システムと情報視覚化システムを融合したSocialActionというシステムによって統計的データ解析と視覚化の試行錯誤を同時に行なう手法を提案しています。このような統合的な試みが今後重要になってきそうです。

http://gyazo.com/027041ae81033b7de033394195b10f59.png

SocialAction

　私が運営している本棚.orgという書籍情報共有サイトでは「情報視覚化の本棚」というデータベースが作ってあり、左図のように情報視覚化に関連する各種の書籍が登録されています。情報視覚化と銘うった日本語書籍はほとんどありませんが、「Information Visualization」をタイトルに含む洋書は数多く出版されています。

http://gyazo.com/e3477190b5f9022faa71610e02cfb136.png

情報視覚化の本棚

　ハイパーテキストの研究がWebとして世の中に浸透するには20年かかりました。全文テキスト検索の研究がWebの検索エンジンとして世の中に広まるのにも20年かかりました。いよいよ情報視覚化の研究が世の中で注目される時代が近付いているような気がします。