https://www.oreilly.co.jp/books/9784873115047/

1章

"Visualization" というコンテキストにおける「美しさ」って？？

美的要素だけではなくて、新規性・伝達力・効率といった要素が求められる。

[1] 新規性
奇抜なことや目新しい見せ方をしろ、という話ではなく。
ユーザーがその可視化によって新しい知見が得られたと思うとき、その副産物として美しさを感じる。
つまり、目新しさというよりは効果的に作られた可視化であることの方が大事。

[2] 伝達力
「ユーザーが情報にアクセスし て知識を得られるようにすること」が成功の鍵で、これに失敗した可視化は失敗。設計するためには、情報の伝達を最も重視するべきである。考慮すべきことはたくさんあるし本書 (Beautiful visualization) ではすべてを取り上げられないが、中でも「意図されたメッセージ」と「利用のコンテキスト」の2つに注意を向けることは重要。

[3] 効率
美しい可視化は伝えようとしている情報に対して、明確なメッセージ、確固とした視点を持っている。
必要な情報へのアクセスはできるだけ単純にすべきだが、必要な複雑さまで削ぎ落としてはいけない。
また、主題と関係のないものが多く含まれるようなものもNG。1つの可視化に多くを詰め込んでも、ユーザーに伝わる情報がそこに比例して大きくなるとは限らない。目的の役に立たないデータはただ邪魔。

[4] 芸術性
軸、レイアウト、形状、色、線、文字の配置といったグラフィック構成は美しさを実現するための必須要素。視覚的に訴えるだけではなく、理解の促進、意味や関係の提示、メッセージをより際立たせることができる。
情報を提示する目的に合致しないグラフィックデザインはかえって邪魔。
真新しさだけを求めて、本来の目的を意識しないで作られた可視化はほぼ間違いなく使いづらくなる。

古典に学ぶ

棒グラフや折れ線、散布図、フローチャートなどなど、「よくある」可視化は、その可視化を採用する側もそれを見る人もよく理解しているので、無難で確実な方法。そして、可視化の第一歩としても適している。ただ、そうした典型的な可視化が最適な場合は実はさほど多くなく、限られたデータの種類だけ。また目新しさは与えづらい。

高い評価を得る可視化は、そういうものとはまた違う性質を持っている。よく知られる視覚表現要素や手法を利用する場合もあるが、 期待されているデータ形式から逸脱した表現 (※1) が行われるのが一般的。

(※1) ... どういうニュアンスで言ってるのか、自分にはわからなかった

美しい可視化は、対象としてるデータの性質を反映している。そのデータに潜在的に含まれている特性や関係が、可視化によって顕在化する。

実例が2つ挙がっている。1つは元素周期表、もう1つはロンドン地下鉄路線図。

元素周期表は可視化の傑作として知られている（詳しい話は割愛）。元素周期表はグラフィック要素を最低限しか利用していないにもかかわらず、非常に有効で成功を収めた事例になる。この例のように「美しさ」の実現にグラフィックデザインは必須要件ではないことがわかる。

美しさを手に入れるには

標準的な方法は使うのも見るのも簡単。そうした慣習に従うことは明確にメリットがあり、活用すべきものではある。ただ、洗練された意図を持ち、より協力なソリューションを目指すのであれば「デフォルト」からは距離を置くべき。

「有益な情報」を十分に伝えられていることが必要。そのためには先ほど出た「意図されたメッセージ」と「利 用のコンテキスト」という２つの要素を考える必要がある。これらについて考察したり、知見を得たりする作業は、普通は反復的なプロセスになる。
また、利用しやすいデザインのためには慣習的なやり方も考慮に入れるべきである。うまく使えば、ユーザーの理解の前提として機能する。（例えば、アメリカの政治に関する可視化。その可視化で赤と青が使われていたら、ユーザーはそれぞれを共和党と民主党を意味すると判断する可能性が高い）

結局のところ、正しい「問い」あるいは「目的」を立てることが非常に大事。そもそもどんな知識を伝達しようとしているのか？？どんな問題に対する、どんな解答を提示したいのか？？どんなストーリーを提示したいのか？？？そういうテーマが十分に掘り下げできてないことには、特定の表現形式とか実装の詳細を議論しても意味がない。メッセージと目標を、十分に検討することが必要。
次に、その可視化を目にするであろうユーザーを想像する。どういうニーズがあり、どういう専門用語を使っており、どういう先入観を持っているのか。どういうタスクを持つ人々なのか、可視化からどういう知識を得ようとするのか・・・などなど。こういったことを詳細に理解することが極めて重要。これはデザインのプロセス全体の中で留意しておくべき必須の要素である。

ビジュアライゼーションの目標をユーザーの立場で表現できなかったとしたら、そのビ ジュアライゼーションには目標がなく、成功を測る指標もないということになります。
目標の例としては、「ロンドン地下鉄路線図を作成して利用者が容易に目的地駅への経路を 探せるようにする」あるいは「物理的特性がはっきりわかり、挙動が予測できるようなやり 方で元素を並べる」といったものが考えられます。

ある可視化が利用されるコンテキストの違いを意識しておくことも重要。例えば、未知の事柄を表現するための可視化と、未知の事柄を探索する助けとなるための可視化はコンテキストが異なる。前者はプレゼンテーションのツールであり、後者は研究のためのツールである。この違いは以降のデザイン上の判断を大きく左右する。どちらを目指しているのか、明確に理解しておくことが必要。

既知の事柄をシンプルに伝える目的（例えば売上目標、チームの成績、出力に対する入力の影響、などなど）で行う可視化では、明確なゴールがある。定めたゴールに即した存在理由が見いだせないコンテンツは捨ててしまった方が良い。一方で、探索的な目的で行う可視化では、そういったものを設定するのは困難。そういった場合（結果の具体像が見えづらいとき）は、異なる種類の可視化をいくつか用意してみるのも良い。

可視化に必要なコンテンツを特定できたら、次はその中でも特に重要な部分があるかどうかを見る。例えば特定のデータや、データ間の関係性など。このようなコンテンツを視覚的に強調する方法はいくつか存在している。例えばサイズや、太くする、明るくする、より詳細に表現する、丸や矢印やラベルで目立たせる、など。また強調する必要がない部分はその逆の表現を行うことで相対的に目立たなくすることができる。（地下鉄の路線図で言えば、市内のゾーン分けは路線や駅といった要素と比べて重要度が低く設定されている）
こうした「重要なものを強調する手法」は、一般的にはプレゼンテーションのためのデータに使用されるもので、研究目的のものではない。重要度を特定してしまうことで、デザイナーは可視化が与えるメッセージを意図的に変更できてしまうからである。

「軸」をうまく使うことで、提示する情報量を減らさずに視覚的なノイズや表示テキストの量を劇的に減らすことができる。軸を使えば、その可視化上のコンテンツが軸上の位置に応じた値を持っていると見做せるようになる。ここでいう「軸」とは、一般的なグラフにおける「軸」だけを指すものではないことに注意する。例えば元素周期表の例は、明確に行（元素の周期）と列（元素のグループ）の軸に基づいて構成されている。

（TBW）

ビジュアライゼーションの実践

成功を収めた例として、New York Times による 2008 年の大統領選挙の結果を示す地図の可視化がある。

地図上の各州に、勝利した党が色分けされている可視化になっている。

ここで、「地理的に正確な地図」を使って可視化を行ったとする（実際の New York Times が作成した図とは異なる）。

一見わかりやすく理にかなっているように見えるが、しかしこれは本来の目的からすると不適切な可視化である。

この地図を用いた可視化は、各州の大きさや位置関係が知りたいのであれば問題はないが、大統領選挙というコンテキストにおいて本当に知りたいのは各州での投票結果が全体にどのような影響を与えたかであるはず。この地図ベースの可視化は、地図上で描画することが難しいほど面積が小さい州の結果は目立たなくなる。しかし、州の面積の大小は「選挙の影響度合い」という目的とは関係がない。また、当選人数の州ごとの人数もここでは表現されていない。

つまり、大統領選挙というコンテキストにおいて、「地理的に正確な地図」という可視化手法は非常に不正確ということになる。

実際に New York Times が作成したのは、「地理的に正確な地図」ではなく、獲得した選挙人の人数分に比例する大きさの四角形で各州を表現したものだった。こうすることで、各州の面積や形状は完全に無視されるが、代わりに選挙での影響力を正確に表現できるようになった。その結果、大統領選挙に各州が及ぼした影響が理解できるようになった。

...ただし、このような可視化にもトレードオフはある。たとえば、四角形の面積からは選挙人数の正確な値を読み取ることは困難になっている。また、各州の形状をある程度保つようにデザインされたたため、結果的に各州の位置関係は大きく歪んだ。その結果、州がどの地域に属するのかがわかりづらくなっている。

この New York Times の可視化は、州の形を正確に表現するという慣習的な表現と、本来の目的（大統領選挙への影響）を効率的に伝達するという狙いのバランスを取ろうとした良い例である。

この成功の理由は、デザイナーが通常の表現（地理的な正確さ）から意図的に離れて、本当に必要なデータに基づいて可視化を行ったからである。普通の地図の目的には適さないが、代わりに最も重要な目的を果たせる地図が生まれることになった。

8章

アメリカ上院議員のソーシャルグラフの ビジュアライゼーション(1991年〜2009年)

「Arlen Specter 上院議員の離党とくら替えについて説明するため」の可視化を、Slate という雑誌の Chris Wilson 氏が執筆したものらしい。^[1]

この目的のために、投票の相関を表すデータとグラフを作成した。

2009年付近のアメリカの情勢について

前提として、この分析の元ネタがわからないので ChatGPT に解説させてみた。

※注 ... 生成AI が作った回答を全面的に鵜呑みした記述なので、このブロックの内容は不正確な情報の可能性がある

当時の大統領は民主党のバラク・オバマ。オバマ政権の最初の年は、経済危機の中で大規模な経済刺激策（American Recovery and Reinvestment Act）を推進するため、超党派協力が求められた。

特に、経済政策や医療保険改革（後のAffordable Care Act、通称オバマケア）を巡って超党派の協力が難しくなり、政治的な対立が顕著になり、後の政治的な分断の前兆となった。

アーレン・スペクター（Arlen Specter）氏は当時の共和党党員だったが、民主党に鞍替えした。この行動によって民主党の勢力は強化され、超党派協力の必要性が減少した。

スペクター氏は、共和党の中でもごく少数の自党の方針と異なる投票行動を行っていた。

クラスタは2つの等に対応した大きなクラスター（民主党が赤、共和党が青）が存在し、ごく少数の議員がじとうとは異なる投票行動を繰り返した。スペクター氏はその中にいた。

アメリカの上院という制度について

各州から2名ずつ選出された合計100名の議員によって構成され、6年毎に改選が行われる。一度に全員を改選するわけではなく、2年ごとにほぼ1/3ずつ改選が行われる。

そのため、上院議員間の連携の変化は緩やかに発生する。

上院での力関係の構造の変化について、（8章の）筆者はグラフを使って大まかに表現できないかと考えた。アメリカの一般的な高校によれば上院は（政治的な意味ではなく、変化を好まないという意味で）保守的な組織である」と説明されているらしく、それが正しいのであれば2009年の出来事はグラフ構造が何らかの知見を伝えてくれるはずと予想した。この問いに対する回答を視覚的に示す手法を検討した。

---

可視化の作成

• 各ノードは1人の上院議員。アルファベット順でノード番号を振る
• ノードの色は所属政党。青は民主党、赤は共和党、無所属は緑、不明は黄色
• ある期間において、65%以上の票決で同じ行動を取った投票行動をエッジで接続する
• 民主党議員が左側、共和党議員が右側に集まるようにグラフを配置する
• 構造の移り変わりを表すために、データを意味ある期間で分割し、それぞれについてグラフを作成する

期間単位として、議会の開催期間（1/3から翌々年の同日までの2年間。一般的に Congress と呼ばれている）を採用した。それぞれの議会には通し番号が存在し、この記事の執筆時点で開催されているのは第111議会。

データ収集

2種類のデータが必要。

1. 各上院議員のメタデータ（名前や所属政党など）
2. 各議員の投票先

data.gov や thomas.com などと同様に、データはフィードとして提供されていた。そのため、当初は過去に遡ったデータの収集が非常に困難だった。この分析では「上院を監視する市民プロジェクト」を標榜する GovTrack というサイトを利用した。このサイトから xml 形式で必要なデータは全部揃えることができたが、取り回しが悪かったのでデータ変換して SQLite に格納するスクリプトを作った。

ある期間において、65%以上の票決で同じ行動を取った投票行動をエッジで接続する

（TBW）

脚注

1. [Wilson 2009] Gansner,EmdenR.，EleftheriosKoutsofios，StephenNorth(2009):“Drawinggraphs with DOT (” http://www.graphviz.org/pdf/dotguide.pdf). ↩︎