順序で配色を分けてみる - データ可視化ミニ講座（９）

地図やグラフなど、データを可視化する際は数値の大小を色に変換することが頻繁に行われます。一見して数値の大小が視覚的にわかりやすくなり、地図ならば地理的な傾向もわかるため、よく使われるテクニックのひとつです。

ただ「数値の大小を色に変換」といっても、その方法はひとつではありません。一般的によく使われるのは、最小値と最大値から計算して均等に色を分ける方法です。たとえば10刻みに10・20・30・40・……・90という9つの値からなるデータを色分けしたいとします。最小値は10、最大値は90ですので、その差は80です。値に応じて3色、たとえば値が小さい順に白・オレンジ・赤色に分けるのであれば、80を3で割って26.666... ≒ 約27ごとに色を分けます。そうすると境目はそれぞれ10 + (27 * 1) = 37、10 + (27 * 2) = 64、となります。したがって色分けは10・20・30が白、40・50・60がオレンジ、70・80・90が赤となります。これはまったく問題なさそうに見えます。

しかし値の分布が不均衡な場合、話は違ってきます。たとえば上の例で最大値が900であった場合、どうなるでしょうか。改めて計算します。最小値が10、最大値が900なので、差は890です。3で割ると約297ですので、計算するまでもなく10から80までが白、900だけが赤になります。つまり9つの要素のうち白が8つ、赤が1つ、中間のオレンジは不在となったわけです。これでは「色で数値の大小を視覚的にわかりやすくする」ことができません。

このとき、順序で色を分けるようにすると値の分布にかかわらず均等に色を分けることができます。上のデータでいうと9つの値を3色に分けるので、最も大きな値が90か900であるかにかかわらず、小さい順に1・2・3番目が白、4・5・6番目がオレンジ、7・8・9番目が赤と塗り分けます。

データ可視化ツールFlourishでいうと、Scale typeを「Binned」に設定し、Binning modeを「Fixed width」から「Quantile」に変えることで同じことができます。

今回はかなり極端な例を使いました。ここまで極端ではないにせよ、実際のデータは綺麗に分散しているわけではありません。ごく一部の人が巨大な富を持っていたり、ごく一部の地域に人口が集中していることもあります。そうした場合に順序での配色方法も知っておくと便利です。

もちろん、数値の大小で色分けするよりも順序によって色を使い分ける方が常に優れているわけではありません。場合によっては不均衡なデータを不均衡なまま可視化することに意義があるケースもあるでしょうし、誤解を招くようなデータの提示は避ける必要があります。最終的にどの方法を採用すべきかは個別のデータや表現したいトピックによって変わります。