第18回 Fundamentals of Data Visualization 読書会 要約

# 本記事の位置付け

下記読書会のための要約です。

https://gaisaba.connpass.com/event/319783/


## 課題図書

https://clauswilke.com/dataviz/directory-of-visualizations.html

この記事に出てくる図は、特に断りのない限り上記ページより引用したものです。


::: note
この書式での注記は、このブログの筆者（IQぼっち）の感想です。
:::

::: note warn
この書式での注記は、このブログの筆者（IQぼっち）の感想のうち、わからなかった部分や、ちょっと気をつけたほうがいいなと思った点です。
:::

## 今回の範囲

19 Common pitfalls of color use

19章 - 色の使い方に関するよくある落とし穴

今日の内容の基本編ともいうべき内容が第4章で、本文中でもよく引用されています。
読書会でも以前4章をやりましたが、忘れている内容もけっこうあったのでこちらにまとめを掲載しておきます。

https://techblog.otakashi.jp/archives/426

# 要約

色は可視化の力を強めることもあるが、同時に、粗末な色の使い方をすると（それさえしなければ最高だったかもしれない）可視化をだめにすることもある。

色は明確で、（本来の論旨を）邪魔することなく、目的にかなうように使われなければならない。

## 19.1 色の使いすぎ／無関係な情報への色付け

### よくある間違いその① 色が多い

よくある間違いのひとつは、色によって情報を識別するには多すぎるカテゴリを色によって分けようとすることだ。

例：散布図上でアメリカの50の州をすべて違う色で表現しようとするとこうなる

![popgrowth-vs-popsize-colored-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/d1ead4ae-cdff-dd08-4945-89c72ed30a13.png)

色の数が多すぎて、お互いに似ている色はどれがどれなのかはっきりわかりづらい。
（テキサスとユタなど）

凡例と散布図を何度も往復するなどの多大な努力によって、ぎりぎり見分けることができたとしても、色でカテゴリーをわける意味はない。

目安として（As a rule of thumb）、色でカテゴリーを分けるなら 3〜5つがベストである。
8個や10個になってくると、（仮に色同士がじゅうぶん見分け可能だとしても）役に立つよりも読みづらい（burdensome）が勝つ。

::: note
<b>可視化の原則は、配色デザインの原則とも整合するというおはなし</b>

デザインにおける配色の原則でも、「色は3色以内におさえると見やすい」という経験則がある。
https://cone-c-slide.com/see-sla/blog/document-color-usage/

以前いた職場で、お客様向け通知の見やすさを[UCDA](https://ucda.jp/)という団体に評価してもらった際も、「7つ以上のカテゴリを色で分けようとするのは悪手」というフィードバックをもらった記憶があります。
:::

先ほどの図であれば、色で分けるのはどの地域の州なのかという4つのカテゴリまでにして、個々のデータポイントは代表的な州だけを個別にラベリングするのがおすすめ。

![popgrowth-vs-popsize-bw-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/713fa733-1227-27ae-7b07-5866e5bef7a9.png)

すべてのデータポイントをラベリングすることはできないが、そもそも散布図を書く目的は（全体の傾向を把握することであって）個々のデータポイントがどれかという話ではない。
どうしても個々のデータがどれかを知りたければ、表形式のデータを添えておくとよいでしょう。

### よくある間違いその② 目的なく色を使う

以下は[4.2](https://clauswilke.com/dataviz/color-basics.html#fig:popgrowth-US)で掲載したのと同じデータを使っているが、4.2では4つの地域ごとに色を分けていたのに対し、こちらはすべての棒を異なるレインボーカラーで分けている。

だが、色を分けたからといって何か新しい洞察が得られるわけではない。

![popgrowth-US-rainbow-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/15c25392-7a3b-6671-5e03-4ddb680fa403.png)

それと、色が鮮やかすぎて目にうるさいという問題もある。

棒の終点とグリッド線を見分けづらいという問題もある。

::: note warn
グリッド線問題は、カリフォルニアのことを言っている？
これはあまり色使いとは関係ない気もするんですが
:::

## 19.2 データの値を表現するのに、モノトーン以外のカラースケールを使う

第4章で、連続的なカラースケールがデータの値を表現できる２つの欠かせない条件を挙げた。

1. 色によって、どの値が大きくどの値が小さいのかを明確に示せること
1. 色の違いと値の違いが対応していること

残念なことに、既存のカラースケールには（とても人気のものを含めて）上記の原則のひとつまたは両方を犯しているものがある。

その際たるものがレインボースケールだ。


:::note alert
<b>レインボースケールの問題点</b>
- 色相環を一周するようにできているので、スケールの両端の色が似ていること（原則1にかなっていない）
- 色の変化が均一でない（原則2にかなっていない）
:::

グレースケールにするとわかりやすいが、黄色からシアンあたりはスケールの約3分の1にわたってほぼ明るさが均一なのに対し、シアンからダークブルーあたりはかなり早く明るい→暗い色に移り変わっている。
（つまり、色の間の距離がデータの値の違いを直感的に表せていない）

![rainbow-desaturated-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/3816d611-70e9-3b47-6608-c1dc279f5530.png)

レインボースケールで実際のデータを可視化してみると、以下の問題のいずれかまたは両方が起こる。

-  データの特徴を見えづらくする
-  データのどうでもいい部分を強調してしまう

![map-Texas-rainbow-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/b1663366-a4eb-be3e-7802-61298314d587.png)

上記はテキサス州における白人の割合を県ごとにプロットしたものだが、白人の割合が75%くらいの県（＝青い県）が無駄に強調されて見えませんか？

:::note warn
上記は、白人割合75%にあたるダークブルーが色の濃さとして濃いからという理由だと思いますが、個人的には、南部の白人割合が低いエリア（赤いエリア）が強調されているように見えました。
いずれにしても、筆者が強調したい論点と関係ないところが強調されてしまうという点では同じか。
:::

## 19.3 色覚障がいを持つ人のためにデザインされていない

男性の8%、女性の0.5%は、なんらかの色覚障がいを持っている。

- deutanomaly/deutanopia - 緑が見えない
- protanomaly/protanopia - 赤が見えない
- tritanomaly/tritanopia - 青と黄色を区別しづらい

:::note warn
日本語にすると余計難しくなるので載せていません。
興味のある方は日本語版の索引をご覧ください。
:::

本書では、色覚障がいのことを color-vision deficiency = cvd と略している。

以下の図で、もとの色が右上だとすると、それぞれの障がいを持った人からは以下のように見える。

![heat-cvd-sim-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/0cbc2a9e-a277-5d9b-fca6-2ecd706e7ba9.png)

### 発散的カラースケール（diverging color scale）の場合

発散的カラースケール（真ん中が白っぽくて、両端に行くほど色が濃くなるカラースケール）だと、この問題はより複雑になる。

あるタイプの色覚障がいを持った人には区別できる色が、他のタイプの人には区別できないパターンがあるから。

![blue-green-cvd-sim-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/169165b8-7a9b-00f1-455e-8e710c989b76.png)

だったらすべての人に区別できる発散的カラースケールはないのかというと、そんなことはなくて、以下のカラースケールはすべての色覚障がいの人にとって（見た目は違っても）区別は可能になっている。

![PiYG-cvd-sim-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/4ec6fd00-f509-7240-b011-81bada3cf7de.png)

### 質的カラースケール（qualitative color scale）の場合

質的カラースケール（カテゴリを色で分ける）の場合、問題は最も複雑になる。

（モノトーンの場合は1色、発散的スケールの場合は2色でいいが、質的カラースケールの場合は）区別したいカテゴリの数だけ色を用意しなければならず、かつ、すべての色がすべてのタイプの色覚障がい者に区別できる必要があるからだ。

筆者のお気に入りは岡部・伊藤カラースケールで、この本の中でもたびたび利用しています。

HexコードやRGB量も掲載しておくので、使ってくれよな！

![palette-Okabe-Ito-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/da3ba67b-a4a6-e352-569a-8a4d1920e97d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/ab08036c-c6b3-5769-df3c-ed8d14a6ec7e.png)

しかし、色覚障がい者に配慮したカラースケールがあるといってもそれが魔法の弾丸ではないことを忘れてはならない。

大きな面積があれば区別しやすい色も、色の面積が小さかったり、線が細くなるほど区別はしづらくなる。

また、オンラインやデスクトップでcvdへの配慮状況をチェックしたり、cvdの人たちからどう見えるかをシミュレーションできるツールもあるので使うといいよ。

# さいごに

要約は以上です。

これを読んで、読書会に参加したくなった方はこちら👇まで！

https://gaisaba.connpass.com/event/