比較のための視覚表現

比較分析をする場面はかなり多いと思う。大学生なら実験や調査結果のデータを条件ごとにグラフにプロットして比較したいだろうし、新型コロナウイルスの感染者数データだって地域ごとに比較してみたいに違いない(?)。

しかしデータの視覚的な比較を正しく行うこと、あるいは効果的に行うことはなかなか難しい。(と思う)

 

 

視覚的な比較の3要素

Gleicherという人が提案した3つの要素。[1]

1. 並置 / Juxtapostion

要するにならべるということである。

f:id:onutomo:20220115165811p:plainf:id:onutomo:20220115165814p:plain

別々のビューで表示されるので、複数の比較対象が時空間的に分離している時に利用すると良い。もちろんユークリッド空間以外でも良い。

メリット:作るのが簡単である。

デメリット:見る人は記憶を働かせながら複数の表現を見比べる必要がある。

 

2. 重ね合わせ / Superposition

要するに重ねるということである。

f:id:onutomo:20220115165818p:plain

同一のビューに表示されるので、"同じ空間上にある"という印象が強くなる。とはいえ必ずしも同じ空間上のデータを表現しなければいけないということはない。時空間的に分離したデータならあえて同一空間上にプロットする意義を考えると良いかもしれない。

メリット:並置よりも記憶力への負荷が低い

デメリット:視覚的に雑然となりやすい。

 

3. 明示的提示 / Explicit Encoding

差を明確に表示するということである。

f:id:onutomo:20220115165816p:plain

メリット:差そのものが提示されるので見る人の作業量が少ない。

デメリット:他の方法に比べて、作るのが難しい。

*ここでは詳しく触れません。

 

 

並置

欠点

厚生労働省のオープンデータ[3]をもとに、新型コロナウイルスの各県における新規陽性者数の日毎の推移を示す折れ線グラフを作成し、これを並べることによって比較してみた。

たくさん並べるとひとつひとつの表現が小さくなってしまい、読み取りが難しくなることが欠点だ。ちなみにこのような小さい表現の並置を特にSmall Multiplesと呼ぶ。[2]

f:id:onutomo:20220128185249p:plain

折れ線グラフのSmall Multiples

 

どうすれば見やすくなるか

面グラフにすると多少見やすくなるかもしれない

f:id:onutomo:20220128185558p:plain

面グラフのSmall Multiples

 

さらに面グラフの変形であるHorizonGraphを用いると以下のようになる。新規陽性者数が多いほど色の濃い青で表現している。

ひとつひとつの図が小さい時は塗りつぶした方が良いのかもしれない。しかし、面積は量的なデータを厳密には表さないことに注意する必要があることを覚えておいてほしい。

f:id:onutomo:20220119002452p:plain

Horizon GraphのSmall Multiples
Horizon Graphについて

Hoirzon Graphは面グラフの変形で、量的データを表す軸方向(ここでは縦軸)を分割し下揃えで重ねるというものだ。

f:id:onutomo:20220119150412p:plain

通常の面グラフ

f:id:onutomo:20220119150415p:plain

2分割した面グラフ

f:id:onutomo:20220119150417p:plain

3分割した面グラフ

このようにしてHorizon Graphは作成される。

 

 

重ね合わせ

欠点

新型コロナウイルスの各県における新規陽性者数の日毎の推移を示す折れ線グラフを作成し、これを重ねることによって比較してみた。

比較対象が多くなると読み取りが困難になってしまうことが欠点だ。

 

県のような名義的な情報は色、特に色相を割り当てることで見分けることができる。色の選択にはカラーユニバーサルデザインを考慮するのが良いだろう。
カラーユニバーサルデザイン推奨配色セット

色相の他に彩度や明度を使うことも考えられるが、これらは順序と結びつきやすいので不要な連想が起こる可能性がある。この場合ならば例えば平均値のランクに応じて彩度(あるいは明度)を割り当てるなどの配色が考えられる。

f:id:onutomo:20220128221351p:plain

折れ線グラフの重ね合わせ

 

どうすれば見やすくなるか

線の交わりが視覚的な混雑の原因だと仮定し、折れ線グラフの各頂点のみをプロットすると以下のようになる。(ある種の散布図とも言えるだろう)

重ね合わせの利点の一つは、重複によって疎密が表現されることである。以下の図を一見すると、毎日の新規陽性者数は1,000人以下に密集しているように見える。

*注意が必要だが、ここでは縦方向の疎密にのみ意味がある。

f:id:onutomo:20220128195839p:plain

線分の描画を取り除いたグラフの重ね合わせ

 

あるいは、7日間の移動平均を取ることで線分をなめらかにし線分のオーバーレイを少なくすることでも視覚的な混雑は解消できるだろう。

f:id:onutomo:20220128221328p:plain

7日間移動平均の折れ線グラフの重ね合わせ

 

他には、配色によって視覚的な混雑を解消する試みもあるだろう。

注目したい要素をハイライトする折れ線グラフを制作した。印刷物等では使えないが、インタラクションを追加することも効果的だ。

f:id:onutomo:20220128222008p:plain

注目したい要素をハイライトした折れ線グラフ

f:id:onutomo:20220128223209p:plain

注目したい要素をハイライトした7日間移動平均の折れ線グラフ




 

参考文献

  1. M. Gleicher et al., Visual comparison for information visualization, Information Visualization, Vol. 10, No. 4, pp. 289-309, 2011.
  2. Tufte, E.(1990). Envisioning Information, Graphics Press.
  3. https://www.mhlw.go.jp/stf/covid-19/open-data.html , 厚生労働省, 新型コロナウイルス感染症について(オープンデータ)