2017.03.02BLOG

ネコの手も借りたい情報設計九匹目
「MIEM：ミーム」その２

Fujii

メリークリスマス！キャットパッド藤井です。実践で役に立つ設計キーワードをぼちぼち取り上げています。

第九匹目は、大連続シリーズ「MIEM：ミーム」その２です。
その１ではバーチャートを観察して、情報には次元があるよ、それを意識するのですよ、という話をしました。
今回は他のチャートを観察しつつ、代表的なチャートフォーマットを理解していきましょう。

表紙は、ギリシャのカフェ前でひなたぼっこするトラネコです。クリスマスシーズンにぴったり。

バーチャート、ラインチャート、エリアチャート、ドットチャートは本質的には同じもの

さて、前回ご紹介したバーチャートをもう一度見てみましょう。バーチャートは、y軸方向に太い線を引くと完成です。

このバーチャートのデータをそのまま使って、異なるチャートを作ってみましょう。

データはdata: [4.7, 5.4, 8.4, 13.9, 18.4, 21.5, 25.2, 26.7, 22.9, 17.3, 12.3, 7.4]こんな感じです。

バーチャートと同じく、日常的によく目にするチャートのひとつです。

バーチャートとは異なり、x軸方向に線を繋ぐと完成です。y軸の上下が強調されるため、主に推移を可視化するのに使用します。

これはエリアチャートと呼ばれるものです。

バーチャートとラインチャートの中間のような特性を持っていますが、正直、いまだに使いどころがよく分かりません。ラインチャートのようにx軸方向に線をつなぎ、y軸方向のゼロからの領域を塗ると完成です。まれに天井方向から伸びたものもあります。

特殊なニーズがなければバーチャートやラインチャートが使われますが、ビジュアルデザイン面での可視性で採用されることもあります。

これはドットチャートと呼ばれるチャートフォーマットです。線で繋がず、点を打つだけのシンプルなチャートです（マウスオーバーすると、x軸方向に線を繋いだラインチャート化する設定になっています）。

x軸にもy軸にも線を引かないので、各ノード（データひとつひとつのこと）を比較するのには向いていません。

しかし、点を打つだけというシンプルな性質上、大量ノードの取り扱いに向いています。

このようにチャートフォーマットは、線の繋ぎ方、領域の塗り方によって、その呼び名を変えますが、本質的なデータは同じものです。

線を引くタイプのチャートはだいたい同じもの、と考えると、その本質が見えてくると思います。

おまけでx軸とy軸を入れ替えてみました。これも本質的には同じものです。

画面や紙面のレイアウト、y軸が縦方向であることに意味があるものに向いています。（人口ピラミッドのチャートはだいたいこれですよね）

バーチャートのy軸を構成要素（％）などで分割すると、シェアチャートと呼ばれるものになります。

ここから東京だけを取り出してみます。

寸胴ですね。これをくるくると丸めてみます。

はい。無事にパイチャートになりました。

さらに、穴を開けるとドーナツチャートです。

パイチャートやドーナツチャートは、総体（データ全体のこと）の構成要素割合を直観的に表すためのチャートフォーマットです。

途中で「東京だけ」のデータに絞り込んだことでも分かるように、本質的にはシェアチャートの表現力が低いバージョンと言えます。

東京以外の都市も表現しようとすると、たくさんのパイチャートを並べるなど工夫をする必要があります。

今回は、バーチャートファミリーとシェアチャートファミリーを分析して、その本質を紹介しました。

意外と、こんなもんか？かんたんじゃーん！という印象を持っていただけたら、多分この記事は成功です。

今後、応用になるにつれ、複雑な考え方も登場しますので、基礎はシンプルに理解しておくことにしましょう。

まだまだ続く、ネコの手も借りたい情報設計の大連続シリーズ「MIEM：ミーム」。次回をご期待下さい。

カオスな明日にネコパンチ！　キャットパッド藤井でした〜。