インフォグラフィックス作りの参考に。ビジュアライゼーションの5要素

データを視覚化する際に、情報の関係性を示すのによく使う表現要素を考えてみました。

ビジュアライゼーションの5要素

ビジュアライゼーションの5要素

自分で作ったインフォグラフィックスを振り返ると、この5要素の組み合わせて表現していました。

色 × サイズ × 位置

データ・ビジュアライゼーション 関ヶ原の戦い
関ヶ原の戦い兵力ツリーマップ

これは「関ヶ原の戦い」の兵力関係を視覚化したものです。
「色」「サイズ」「位置」を組み合わせて表現しています。

「色」

三成方(西軍)を緑系、家康方(東軍)を赤系、裏切った大名を「黒」、戦闘に参加しなかった大名を「グレー」で表現

「サイズ」

各大名の兵力を四角のサイズで表現

「位置」

西軍を西(左)寄り、東軍を東(右)寄りに表現

つながり

Facebook Social Graph
Facebook関係者の人物関係図

Facebook関係者をまとめたものです。

「つながり」

マーク・ザッカーバーグを中心に、3つのグループ(Co-founder/Management Team/Adviser)のつながりを表現

色 × サイズ × つながり

レディオヘッド 2012ツアー・セットリスト傾向インフォグラフィックス
レディオヘッド 2012ツアーのセットリスト傾向を視覚化

イギリスのバンド・レディオヘッドがツアーで演奏した曲目について、どのアルバムからの演奏が多いかを視覚化したものです。

「色」

アルバムごとに曲名(小さい円)の色を変えて表現

「サイズ」

ライブでの演奏回数によって円の大きさを変えて表現

「つながり」

小さな円(曲)を大きな円(収録アルバム)でくくってつながりを表現

サイズ × 形

クラウド・ファンディング キャプファイアー成功プロジェクト比較 インフォグラフィックス
キャプファイアー成功プロジェクト比較

クラウド・ファンディング・サービス「CAMPFIRE(キャンプファイアー)」でどのカテゴリー(ジャンル)のものがたくさん成功しているのか調べたものです。

「サイズ」

棒グラフの長さで成功プロジェクトが得た支援金額・パトロン数を表現

「形」

カテゴリーごとにピクトグラム(アイコン)の形を変えて表現

といった具合に、冒頭で挙げた5要素(色/サイズ/位置/形/つながり)を組み合わせると、情報の関係性を複数の角度から示すことができます。

インフォグラフィックス作り、データ視覚化の参考にしてみてください。