マンセル表色系を使って視覚化の配色を改善する

データを視覚化するとき、重要なのが色の選び方です。せっかく描いたグラフも、配色が悪いと見栄えがぱっとしなかったり、目が疲れたりします。

以下はJFreeChartのデフォルト配色ですが、あまり良くない色使いの例だと思います。

この配色は、

#FF5555, #5555FF, #55FF55, #FFFF55, #FF55FF, #55FFFF

になっています。人間はRGB成分を平等に知覚するわけではないので、こういう（一見均等な）色の割り当てをすると、色のまとまり感がなくなって野暮ったい見た目になってしまいます。

マンセル表色系は、人間の心理や知覚を前提にした色体系です。これを参考にして配色を組めば、目に優しい視覚化ができると思います。

マンセル表色系はhue（色相）, value（明度）, chroma（彩度）の3要素で構成されますが、人間の知覚を考慮している関係で、HSBとは違って色空間が対称形にならないのが特徴です。

マンセル表色系の色データは、以下でダウンロードできます。

上のページ中の"real.dat"が、hue, value, chromaとxyY色空間のマッピングになっています。xyYからRGBへの変換は、こことここが参考になります。

以下は、マンセル色空間をhue - chroma平面で輪切りにした図です。明度が変わると、彩度の分布の様子が変わってくるのが分かります。

さっきのJFreeChartの配色を、value = 8, chroma = 6のパレットからランダムに選んだ色に変更したのが以下のグラフです。かなり見栄えが改善していると思います。

nowokay 2009/04/27 21:43 色が地味になって、「見栄え」が悪くなってる気が・・・
category1と2、category4と5の色合いも近くなってカテゴリごとの差別化も弱くなってるような。

kaiseh 2009/04/27 22:07 確かに、これは彩度が低かったかも。
あと、この例の場合はランダムに色を選ばない方が良かったですね。

スパム対策のためのダミーです。もし見えても何も入力しないでください

画像認証

トラックバック - http://d.hatena.ne.jp/kaiseh/20090427/1240835692

kaisehのブログ