エドワード・タフテの原理に基づくグラフとウェブデザイン

Original Essay: http://staff.washington.edu/larryg/Classes/R560/zz-tufte.html

これは、定量的情報を示すためのグラフ使用に関する、エドワード・タフテの先駆的研究の概要です。主に、この主題に関する彼の3冊の本から抜粋したテキストとアイデア、および、私の独自の追加資料で構成されています。このページはテキストのみの形式です。概念を理解するには、これらの原本を参照する必要があります。イラスト無しではこの概念を理解するのが困難だからです。また、現在のビデオモニター技術は解像度が低過ぎてその細密性を実現できません。彼の研究は、「映像の酔いと白（A Visual Strunk and White）」と題されています。

この概要の全体を通して、略称、VD-pp、VE-pp、EI-ppと名付られた、彼の本のイラストへの参照を含めました。「pp」はページ番号であり、加えて：

 

• VDは「定量的情報の視覚画像（Visual Display of Quantitative Information）」を、
• VEは「視覚による説明（Visual Explanations）」を、
• EIは「心に思い描く情報（Envisioning Information）」を意味します。

 

導入

タフテの研究は、以下の問題に対応しています。

 

• 問題：問題は、大量の情報をいかにして、簡潔に、正確に、目的に適し、理解しやすい方法で、提示するかです。具体的には、原因と結果を示し、適切な比較が行われていることを確認し、望ましい（有効な）目標を達成することです。
• その重要性：印刷されたグラフ情報は、今や私たちのすべての生活の原動力となっています。これは、特定の専門分野に従事する人に止まらず、コンピューターとインターネットの広範な使用を通じ、ほぼすべての人々に影響を与えています。情報を迅速かつ正確に転送することが、多くの人にとって、生死の問題になる可能性さえあります（例えば、チャレンジャー号爆発事故）。記号とグラフが私たちの生活に影響を与える程度は、情報技術を習得したすべての文化における、IQ値の劇的な増加によって見ることができます。米国では、過去60年間を通し、10年毎に平均3 IQポイントが増加しました。合計で18 IQポイントもの伸長です。この増加についての生物学的な根拠は解明されておらず、最も可能性の高い原因は、現代の生活に伴う文字と記号とグラフへの、広範囲に渡る露出だと考えられるます。上述したように、この増加は情報技術にさらされた、すべての文化に見られます。
• その適用：情報の一部は統計情報の表示に関連しますが、汎用する文字でさえ、あらゆるタイプの表示に多く適用されます。
• 解決策：グラフ表示への一貫した対応を開発し、その普及、正確さ、および、容易な理解の向上を目指します。

 

グラフ・プロットの歴史

非常によく知られた最初のグラフ・プロットは、10世紀まで遡ります（VD-28：最初の既知のグラフ）。これは、グイド・オブ・アレッツォが今日使用しているものと非常によく似ていて、2次元の楽譜表記を開発していたときと、ほぼ同じ時期でした。 15世紀には、ニコラス・オブ・クーザは、距離対速度のグラフを作成しました。 17世紀、ルネデカルトは、数学関数の表示にのみ使用される分析幾何学を確立しました。しかし、有益なグラフの主な発起人は、今日よく使われる、折れ線、棒、円グラフを作成した、ウイリアム・プレイフェア（1759-1823）でした。

グラフの説得力

グラフの重要性と説得力は、次の例で確認できます。

 

• 図VD-13 / 14は、グラフからすぐに分かるように、完全に同一の統計的尺度とプロパティが多数あり、しかも非常に異なる4つのプロットを示しています。
• チャレンジャー号爆発事故：NASAに示されたデータグラフは、実際に大切な情報を伝えませんでした（VE-47とVE-45）。 NASAが、低温と固体ロケットブースターへの損傷の影響を示す、非常に単純な、しかしながら適切なグラフを見ていたら、チャレンジャー号は（非常に寒い）その日に打ち上げられなかったでしょう。
• 1854年のロンドンでのブロード・ストリート・ポンプ・コレラの流行：ジョン・スノー（VE-31：コレラの死亡）による制作です。このグラフは、ポンプの設置場所周辺のコレラによる死亡の分布を表しています。
• イラストVD-166「フランスのコミューン」：フランスの30,000を超えるコミューンの境界を示す非常に緊密なプロットを表示しています。

 

アプローチの基本的な考え方

グラフを提示するときに使用する重要な規則と課題：

 

• グラフを見る人々の知性は高いと想定しましょう（E.B. ホワイトの指摘の言換え）。この規則と相反して、 NYタイムズなどの出版社でさえ、人々は複雑な散文を読むのには十分な知性があるのに、複雑なグラフを解読する能力が低いと考えています。
• グラフ情報を過度に「簡素化」することで、見る人を制限しないでください。--- 見る人が自分の能力を駆使し、データを最大限に活用できるようにしましょう。
• 明確化しましょう。--- 詳細な情報を追加しましょう（重要な詳細は省略しないでください。たとえば、セリフフォントは、サンセリフフォントよりも「詳細」ですが、実際には読みやすくなります）。アインシュタインはかつて「説明はできるだけ単純であるべきだが、度を越して単純であってはならない」と言っています。
• 何よりも、データを表示しましょう。グラフは「知性の可視化」です。
• データが豊富なプロットは、原因と結果、関係、類似点など、さまざまな視点から大量の情報を表示できます（VD-31：列車のスケジュール、VD-17：階級区分図（chloroplethic map）、VD-41：ナポレオンのキャンペーン、EI-49 ： 宇宙ゴミ）。
• プロットには、データ、データ制限、認証、および、例外を表示するための注釈が必要です（VE-32：例外のテキスト）。
• 数字を修飾する目的でグラフを使用しないでください。

 

グラフの整合性

「虚偽、特にバカバカしい嘘、統計」に加えて、グラフは見る人を容易に欺けます。例えば、次のようなものが不正グラフにあたります。

 

• 全期間をより短い期間と比較すること（VD-60：ノーベル賞、10年の期間と5年期間の一定情報を比較）。
• 「虚偽事実」[=（グラフのサイズ）/（データのサイズ）]を使用して、相違点または類似点を誇張すること。
• 違いを誇張するために、線形スケールの代わりに面積または体積表現を使用すること。 1次元と2次元と3次元のサイズ比較を使用して人々を混乱させる方法の例として、VD-69：「減少する町医者」を参照してください。面積と体積の表現は、二乗や立方法で人々をだまします。線形サイズの増加は、面積の増加の二乗と体積の増加の三乗につながります。
• 財務グラフで人口の増加やインフレを調整しないこと。
• デザインの多様性を利用して、データの多様性を不明確にまたは誇張する（VD-61：OPEC価格の誇張）。
• 垂直軸を誇張する。
• サイクルの一部のみを表示して、サイクルの他の部分のデータを、適切な比較に使用できないようにする。

 

グラフ作成をコンピューターで手早くかつ頻繁に行えるため、グラフのエラーは、過去よりも今日で広範にみられます。グラフの整合性を保証するためのガイドラインには、次のものがあります。

 

• チャートジャンク（chartjunk）を避ける
• 非数量化をしない：妥当な範囲で正確に実際のデータを提供しましょう。例えば、いくつかの要因が関係している場合、1つの基準に従って、製品をより良いまたはより悪いとしてランク付けするのは、その差異の大きさが示されない限り、役に立たないことがよくあります。
• 情報を伝える必要がない限り、視覚効果を誇張しないでください。確かに、時々そのような誇張が要求される場合はあります。例えば、同じチャート上で惑星のサイズと軌道の両方を正しいスケールで示すことは事実上不可能です。一方、図VE-24：「誇張された垂直金星スケール」は、そのような劇的な誤報を示しており、ある1人の研究者は「平らな金星の社会」の形成を呼びかけていました。
• 誤情報を避ける：周囲が太線で描かれたボックスと、下線付きのサンセリフテキストは、グラフを読みづらくします。
• 集計の影響に注意してください。例えば、この点では、（場合によっては任意の）境界に基づいて結果をグループ化する階級区分図（chloroplethic map）よりも、大概、ドット・マップの方が適切です。
• 適切な質問をする：
1. 表示内容は事実を伝えていますか。
2. 表現は正確ですか。
3. データは記録されていますか。
4. 表示メソッドは真実を伝えていますか。
5. 適切な比較、対比、および文脈が示されていますか。

 

データ密度

グラフは、非常に高密度で豊富なデータセットを表すのに最適です。 タフテはデータ密度を次のように定義しています。

データ密度　= （データ・マトリックスの入力数）/（グラフの領域）

コンピューター画像のデータ密度が低いせいで、見る人は、まずグラフ全体の情報を理解するのではなく、部分的に順を追って解読しようとします。この要因が理解を不利にすることに注意してください。良質のグラフ表示とは次のとおりです。

 

• 比較
• 多変量
• 高密度
• 相互作用、比較などを明らかしている
• ほぼすべてのインクが実際のデータインクであること

 

データ密度の例は次のとおりです。

• 　天文グラフの場合、110,000平方インチ。これは、グラフの既知の最大密度です。ほとんどの科学雑誌では、平方インチあたり約50〜200の数値を取得します
• 150 Mbits =人間の目
  8 Mbits =一般的なコンピューター画面
  25 Mbits=カラースライド
  150 Mbits =大きな折り畳み地図
  28,000文字=参考書
  18,000文字=電話帳
  15,000文字=ノンフィクション

 

データが豊富なプロットの優れた例は、開始時刻と終了時刻、場所、方向、ルート、乗換、および、速度をすべて1枚の用紙に示す、鉄道の運行日程グラフ（VD-31：列車のスケジュール）です。

データ圧縮

• データ圧縮を使用して、データを表示（非表示ではない）します。たとえば、EI-22：「太陽スポットサイクル」では、一つのグラフに一定期間にわたって多くのスポットを表示するためにのみ、太陽スポットをy軸方向の細い垂直線として表示します。
• 圧縮を使用して、x軸、y軸、x / y相互作用を示すプロットなど、1つのグラフに多くの情報を表示します。 （VD-134：パルサー信号; VE-111）
• 冗長である場合（たとえば、チャーノフ面）、左右対称を除外するか、理解を助ける場合に、それを拡張します（世界地図上では、その半分の世界が、より理解しやすい、巻き込み文脈方式（wrap-around context）を採用しています）。ある研究によると、対象図を見る人はよく、その片側にのみ集中し、もう一方の側はよく見ていないとのことです。

多機能グラフの要素

多くの場合、グラフ構造は一度に複数の目的を果たすことができます。例えば、

• ステムプロットとリーフプロットは、その連続の物理的な長さによって、構造を直接表現する数列を示します （VD-140：茎/葉; VD-141：軍師団; VD-143：正規曲線）。
• 自動車の欠陥の消費者報告リスト（VD-174：消費者レポート）は、ミクロとマクロ構造を明らかにします。ディスプレイの個々の要素が特定の弱点を明示するのに対し、黒インクの全体的な表示は、最も問題のある車を即座に明らかにします。
• グリッド（格子状）表示は、それ自体がデータであることがよくあり、値と座標軸の両方を同時に示します（VD-152：データベースのマーカー）。

データインクの最大化 非データインクの最小化

タフテは、データインク比率を次のように定義しています。

データインク比率 =　（データインク） / （プロットのインクの合計）

目標はこれを妥当な大きさにすることです。これを実行するためには：

• 過密すぎるグリッドの使用を避ける。
• ボックス・プロットを中断線に置き換える（VD-125：縮小ボックスプロット）。
• 囲んでいるボックスをx / yグリッドに置き換える。
• 空白を使用して棒グラフのグリッド線を示す（VD-128：空白）。
• 目盛り（線なし）を使用して、xおよびyデータの実際の位置を表示する。
• グラフの切り詰め：バーを1本の線で置き換え、非データインクを消去する。軸から線を削除する。データ値 [範囲フレーム] をx と y軸で開始する。
• 過密したグリッド、軸上の目盛り、単純データのさらなる簡素化、ボックス、シャドウ、ポインター、凡例、などの多用を避ける。データ含有物ではなく、データそれ自体に集中する。
• 常に、必要なだけの範囲で（しかも違和感のないやり方で）情報を提供する。

小さい倍数

小さい倍数は、ある一現象の特性を表し、単一ページ上で、サムネイル規格のグラフセットを構成します。これらは：

• 比較を描写し、次元と動きを向上させる、多変量表示に適しています（VD-114：粒子運動量）。
• 比較、対比、選択肢の範囲、または、オプションの範囲の提示に向いています（VE-111：カルテ）。
• 同じ測定値と目盛りを使用する必要があります。
• 複数の画像のゴースト化により動きを表現できます。
• 画像の実際の重なりや回転の速いサイクルを可能にするため、コンピューターでの使用に特に役立ちます。

チャートジャンク（Chartjunk）

チャートジャンクとは、適切なデータを提供せず、かつ、混乱を引き起こす装飾的な要素のこと意味します。

• タフテは、1 + 1 = 3（またはそれ以上）の規則について説明しています。近接する2つの要素が、目に見える相互作用を引き起こします。このような相互作用は非常に疲弊が多く（例：モア？パターン、光学振動）、実際には存在しない情報を表示する場合があります（EI-60：存在しないデータ、VD-111：チャートジャンク）。
• 主要な科学出版物では、2〜20％のモア？振動が見られます。例えば、最近の統計やコンピューター出版物では、チャートジャンクの範囲は12％から68％です。
• チャートジャンクを回避する手法は、クロスハッチングを（パステル）ソリッドかグレーで置き換えること、凡例での解説ではなく直接解説をすること、重量過多のデータ含有を回避すること、が含まれます。

色

多くの場合、色によってデータの理解が大幅に向上します。

• 大抵の場合、異なった色の積み重ねを使うと効果的です。
• カラーグリッドは、前後関係を表す、「色の積み重ね」の一例ですが、目立たず、際立たないようにする必要があります。
• 明るい原色は、小さなハイライト領域に主に使われ、背景として使用することは稀です。
• 異なった物が、形、サイズ、目的に関係なく同じ色であると、それらの物は同じ物であると判断され、混乱を招く恐れがあります。コンピューター画面では、色の多使用を避け、特定の物には特定の色を識別子として与えましょう。
• 輪郭線や外形線が背景の色に影響されて変化してしまう色を使用した場合、1 + 1 = 3効果を生成できず、際立って見えてしまいます。
• 色は、ラベル、計測値、および、現実の模倣のために使用できます（たとえば、地図内に描かれた青い湖）。
• 明るい色を白と混ぜて配置しないでください。
• ライトグレーに対比するカラースポットは効果的です。
• 色は多次元の値を伝えることもできます。
• スクロールバーはパステルカラーである必要があります。
• 背景色は、2つの異なる色を同色に見せたり、2つの類似した色を非常に異なる色に見せたりすることがあります（EI-92 / 93：色に対するコンテキストの影響）。
• 細かい輪郭線で区切られている場合、カラーまたは微妙なグレースケールの色合いが最適です（EI-94：輪郭のある色合い）。
• 5〜10％の人がある程度の色覚異常であることに留意してください（赤緑が最も一般的なタイプで、次に青黄色が続き、青緑もよく含まれます）。

データ理解を高めるための一般的な考え方

• 高密度がお勧めです。人間の目と脳は、選択、選別、編集、グループ化、構造化、要点の認知、焦点、複合、輪郭、集積化、項目化、識別、選り分け、抽象化、簡略化、分離、理想化、要約、などを行うことができます。見る人がその能力を発揮できるようにデータを提供しましょう。人々の能力を制限してはなりません。
• 粗雑さや混沌は設計ミスであり、複雑であることとは違います。
• 情報は、ある一定の違いを際立たせるための、いくつかの違い、で作られてます。描写しようとしている内容に違いをもたらさない情報はあえて「隠す」こともできます。
• 並列表示では、関連する違いのみを表示しましょう。
• 並列処理の価値と力：1つの要素が確認できれば、他のすべての要素も理解できます。
• 優れたデザインのための重要な概念：図と背景の分離（例えば、背景がぼやけていると前景がより鮮明に見えることが多い）、多層化と分離、空白の使用（例として、馬遠（Ma Yuan）の中国の風景画は空間を強調し、東洋の音楽は音ではなく沈黙を強調する）を採用しましょう。
• グラフは水平方向をより強調する必要があります。

データ理解を高めるためのテクニック

データの理解力を高めるには：

• 印またはラベルはできるだけ小さくしますが、はっきり見える範囲での小ささです。
• 密度が低く、視覚的な次元に沿って値を並べ替えることができないため、円グラフは避けてください。
• 通常、階級区分図（chloroplethic map）の代わりに、ドット・マップを使用します。これは、マップがより正確に表示されるためです。
• テキストとグラフを密接に織り交ぜる：項目名を関連部分に直接付け、データの横に小さなメッセージを配置し、可能な場合は凡例を避け、グラフのデータに直接、注釈を付けましょう（VE-99：フォントの構造）。
• 可能な場合は略語を避け、かつ、横書きのテキストを使用しましょう。
• セリフフォントを大文字と小文字で使用しましょう。
• 他の方法では見落とされている可能性のある情報を（正直に）明らかにできる場合は、スケーリングの変換を使用しましょう。
• 分解六角形（exploded hexagon）、真のステレオ、極端な遠近の短縮などの、3Dと動作を明らかにし、さまざまな構造を使用しましょう（球の隅で：EI-15「分解六角形」を参照）。

グラフィックを使用しない場合

• 多くの場合、テキスト表は、単純なデータグラフを置き換えることができます。行と列の要約に役立つ2Dテキスト表を使用することもできます。非比較データセットは通常、グラフではなく、表に属します。
• ポスターのデザインは、情報を伝えるのではなく、単に興味を引くことを目的としています。通常、これらはグラフに適したデザインではありません。
• 写真が1000の言葉に値しない場合は、その写真は無価値です（アド・ランハード（Ad Reinhardt）からの引用 -- これは、「写真は10,000の言葉の価値がある」という中国のことわざに基づきます）。

美学

優れたグラフは、デザインのシンプルさ、データの複雑さ、そして、真実で構成されます。これを達成するためには、

• 活字、数字、図を近接させて使用しましょう。
• 解読が容易で、かつ、一定の複雑さを持つデータを表示しましょう。
• グラフでストーリーを伝えましょう。
• 文脈とは無関係な装飾を避けましょう。
• データ表示の、よりコンパクトでより目を引く方法は、幅の異なる線を使用することです（VD-185：モンドリアン）。
• 対称性を利用して美しさを追加しましょう（かつて誰かが「すべての真の美しさには、ある程度の非対称性が要求される」と言っていました）。