データ可視化のお作法
先日、 John Tukey の著書「Exploratory Data Analysis」を読み終えた。
読み終わってからずっと考えていることがある。
それは、データの可視化（ビジュアライズ）について。
幸いにして、僕は学生時代に理系を専攻していたことと、いまの職業が設計者ということもあり、目の前のデータを可視化することに慣れている。慣れているというよりも、
「こうすると、こんな風に意図を表現できるな」
という複数のパターンをすべて絵で記憶している。
そのため、例えば、仕事でアプリのDashboardUIを作る時、僕の思考は「あー、このパターンだったら折れ線グラフね。あとはこういう風に注意を惹くためにデザインを調整して…」といったように、（おそらく）最適な可視化の方法まで一直線にたどり着く。
でも、このプロセスはパターンを記憶していることに相当依存している。
可視化を最初に習うのは小学校
可視化（ビジュアライズ）することには意味がある。
単なるデータの集合にすぎなかったものが、意味を持つ情報として互いの関係性をわかりやすく示してくれる。そして、正確に描画できればという前提付きになるが、他者にもこちらの意図が伝わりやすい。
だから、棒グラフだったり、折れ線グラフだったり、分布図だったりと、何らかの可視化表現を選択してデザインを試みる。
でも、大抵の場合はうまくいかない。
というか、間違った可視化を選択をしているケースがあまりにも多すぎる。
なぜだろう？
振り返ってみると、こうした可視化の表現、グラフの読み方と描き方を最初に学ぶのは小学校まで遡る。小学３年で棒グラフ、小学４年で折れ線グラフ、中学でヒストグラムや線形関数、高校で確率分布図や対数関数といったように、それぞれのグラフを断片的に教わる。（さぼっていなければ、そういうことになる笑）
でも、大人になってから、この可視化のプロセスを本気で勉強する人はいないだろう。それが何を意味するかというと、与えられたデータを眺めながら、
今回の可視化の目的は何か
そのデータはどのような種類のものか
どの可視化を選択するのが最適か
この１つひとつに、自信をもって答えられる人がほとんどいない状態になるわけで、結局、世の中に間違いだらけのグラフが乱立することにつながる。
絵で理解しているものを言語化する
最近、僕の会社では、さまざまなデータを可視化してDashboardUIとして成立させる設計案件が増えている。この手の案件では、設計者（IA）やUIデザイナーが可視化を間違ってしまうと大変なことだ。世の中にまた１つ、ヘンテコなグラフが増えてしまうし、そのような意図が伝わらないDashboardを誰も使いたくないだろう。
そこで、冒頭にも書いたが、
「この可視化で、こんな風に意図を表現できるな」という複数のパターンをすべて絵で記憶している。
この行間に潜んでいるものに注目したい。ここに可視化のためのエッセンスが詰まっている気がするので、自分の言葉で残しておこうと考えた。
良い可視化とは何か
このnoteの目指すところは、最終的には「間違いのない可視化表現（グラフ）を選択する」というところにある。そこに至るまでの思考の流れが大切だと考えているので、少し寄り道しながらゴールにたどり着くように書いていく。もし、さっさと最適なグラフを知りたいという人がいたら、後半まで読み飛ばしてください。
まず、最初に考えたいのは「良い可視化」とは何かを知ること。これはとても単純で、次の３つについて正しく理解し、しっかり練られたものになっているかどうか、そこに尽きるだろう。
1. コンテキストの精度
設計者は、ユーザーがその可視化された表現を見るとき、彼の文脈（以下、コンテキスト）に最新の注意を払う必要がある。誰に対してなのかも特定できず、可視化する目的も定まっていない状況で、良いものが生まれるわけがない。そのため、コンテキストの精度を最大限まで高める必要がある。
2. 間違いのないグラフ選択
コンテキストが明確になったら、次に考えるのは間違いのないグラフ選択だ。与えられたデータを見たときに、それを見慣れない複雑怪奇なグラフで表現しても理解されないし、一般的な馴染みのあるグラフを選択しても、その選択が間違っていたら本末転倒だ。そのため、可視化で目指す場所はどこかを考えていくと、下の図のように右上の円の中となってくる。
3. デザインの質
可視化のターゲットが決まったら、あとはデザインとしての完成度≒つまり質をどれだけ上げられるか？にかかってくる。デザインが苦手だなと思っているディレクターや設計者でも、日々、デザイン作業に向き合っているデザイナーの気持ちを察することも大切であり、そこから分かることもあると思うので、自分でやってみることをおすすめする。先ほどの２次元表現に「デザインの質」を加えると、下のような３次元の空間になる。コンテキストの精度が高く、グラフの選択も正しい場合、それだけでも十分意図が伝わる可視化になっている。でも、グラフの質にこだわりながら、質を高める働きかけを試みることはとても大切だ。
もう１つ理解しておくこと
可視化の注意点としてもう１つ覚えておくことがある。それは、「誰に対して、何を伝えるための可視化なのか？」をどんなに緻密にシミュレーションしても、ユーザーは自分が欲しい情報を勝手に読み取る傾向にあるということ。設計者が企てたとおり、順序よくグラフを眺めてくれるユーザーはほとんどいないということを理解しておかなければならない。例えば、データの羅列だったものを可視化することは、その可視化表現を使うことで他者との視覚的なコミュニケーションを図るという側面をもっている。しかし、言葉を使ったコミュニケーションでも、100%こちらの意図通りの解釈をしてもらえるかどうかはわからない。下の図のように、言語と視覚のコミュニケーションには、両方に通じる共通項があるわけで、相手の行動を促すために必要になってくる要素を考え、それを可視化する際に織り交ぜていく必要がある。
今、何を見せたいか？その目的を知る
さて、ここからが本題になってくる。自分が今、可視化を手掛けることでユーザーに何を示したいのか。
数字の比較なのか、
時間毎の変化なのか、
全体に対する割合の示唆なのか？
これは可視化の目的につながってくる話だ。僕はこれを５つに分類していて、それぞれを対等には扱っていない。むしろ、仕事で頻出するもの、定番の型のようなものがあって、それを下の図の板チョコみたいな感じで記憶している。
おおよそ、比較、変化、構成の３つ。これが可視化の目的になることが多く、相関と分布については、あまり考えなくても大丈夫な気がする。が、念の為、補足すると、
２つ以上の指標の関係性を示そうとすると相関の可視化が必要。データのばらつきや偏りから傾向を示唆しようとすると分布の可視化が必要、といった具合だが、基本は「比較・変化・構成」の３つに収まると考えている。
最初に、この３つのうち今回の目的はどれに合致するかを知る必要がある。
グラフの軸を判別する
次に、今回の可視化で取り扱うデータをざざっと眺めて、その種類を把握する必要がある。ここも厳密にはもっと細かな分類がありそうな気もするけど、僕は次のような３つの軸を念頭にデータを見極めている。
カテゴリ（質的）
数値（量的）
時系列（量的）
カテゴリは、製品名や地域などのラベルやグループで表現されるもの。順番で並び替えることはできない。
数値は、売上や使用量など計算可能なもの。昇降順で並び替えることができる。縦横軸どちらでも主軸として利用されるもので、変数が３つになるとサイズや色情報で表現を変える必要が出てくる。
時系列は、時刻、月、年といった時間の流れを示すもの。昇降順で並び替えることができる。基本的には横軸で使用されることが多いが、沿革や歴史のようなものを上から下に縦軸で表現する場合もある。
これらを個別に可視化対象にすることはほとんどなく、この３つの組み合わせから代表的なグラフのパターンが見えてくる。
目的と軸の判別から正しいグラフを選ぶ
可視化の表現方法はもっとあるが、下図の代表的なパターンを覚えておけば、ほぼ間違うことはない。
【目的は比較】×【軸が数値】
比較にも種類があるが、まず、複数項目の数値の大小を比べたい場合。これは絶対評価になるので棒グラフの１択になる。データの項目数が少なければ縦棒グラフでOKで、仮にデータの項目数が５つ以上と多い時は横棒グラフを選択する。
一方、アンケート調査結果の５段階評価や、楽しさ・親しみやすさなどのUX評価指標を数値化したものなど、全体像からバランスを見て判断する場合、それは相対評価になる。このような時は、レーダーチャートを使ったりするが、比較対象が３つ以上になるとごちゃごちゃしてわかりにくいので注意が必要。
【目的は構成】×【軸は数値】
構成は全体が100％になるものという理解でOK。その時の各項目の割合をわかりやすく示すことになるので、積み上げ棒グラフになる。項目が２つの時、あるいは選挙結果などインパクトを与えるために円グラフを使う場合もあるが、円グラフは面の大きさで間違った意図が伝わる可能性が高い。とても曖昧なものなので僕は使うのが苦手。
【目的は変化】×【軸は時系列】
時間軸中心の時系列の変化を示すものであり、各項目の推移の状況を示唆しながら、これまでの動きや今後のトレンドを伝えるには折れ線グラフになる。構成について時系列で示す場合は面グラフの形になるが、意図が伝わりにくいので、僕はほとんど使わない。
【目的は相関】×【軸は数値】
上の３つを完璧にしておけばほぼ間違いはないが、参考までに目的が相関関係を示す場合も追加するとこのような形になる。
相関は２つ以上の数値の関係性を示すもので、主軸が数値と数値になることから、まず扱う変数が何個になるか確認する。２つの場合は散布図。３つ以上の場合には、バブルチャートで表すことになるが、この場合、３つ目、４つ目の変数を色や大きさで表現することを余儀なくされるため、可視化が複雑になってくるのであまり推奨されない。
4000字を超えたので一旦ココまで。
ひとまず、今回書いてきた可視化のお作法を知っていれば間違ったグラフを選ぶことはなくなるはず。さらに、最終ステップの「デザインの質」をどうやってあげるか？についても時間を見つけて更新しようと思う。
