ピックアップ

インフォグラフィックスの作り方(関ヶ原の戦い兵力ツリーマップ篇)

先日、自作インフォグラフィックス「関ヶ原の戦い兵力ツリーマップ」を公開しました。
テーマ選びから始まって、6つのステップを経て、完成させました。

1.テーマ選び

関ヶ原の戦いは小早川秀秋の裏切りが東軍の勝利を決定づけたと言われています。
その影響度合いを視覚化してみようと思いました。

2.データ収集

Wikipediaに関ヶ原に布陣した大名と兵力の情報があったので、必要なデータをExcelに転記していきました。

3.データの解析・加工

西軍で主力として戦った石田三成、宇喜多秀家など、裏切った小早川秀秋、吉川広家など、戦闘に参加しなかった毛利秀元、長宗我部盛親など、勝負に特に影響したと考えられる大名を色分けして整理しました。

インフォグラフィックスの作り方 3

4.スケッチ

各大名を表現するサイズを決めるために、簡単なプログラミングでスケッチを制作しました。

インフォグラフィックスの作り方 4

5.ドラフト版制作

スケッチをIllustratorに取り込んで、文字を入れた時のイメージ、色のイメージを試してみます。
はじめ、すべての大名の名前と兵力を記載しようと思いましたが、情報量が増え、ごちゃごちゃしてしまったため、基準を設け、兵力が多い大名のみ名前を記載することにしました。

インフォグラフィックスの作り方 5

6.ブラッシュアップ

細かい調整、補足情報を加え、ブラッシュアップして、完成させます。

インフォグラフィックスの作り方 6

関ヶ原の戦い兵力ツリーマップ(完成形)

前に公開した別のインフォグラフィックス制作手順とは各工程の区切り方を一部変えていますが、おおまかな流れは同じです。

今回、一番違うのは、「スケッチ」を手書きではなく、d3.jsというJavascriptライブラリを使ってプログラミングで行ったことです。

d3.js

d3.js
d3.js

基本的な「データ・ビジュアライゼーション」表現が実装されており、今後も活用したいライブラリです。

プロフィール

櫻田潤

櫻田 潤

プログラマー、システムエンジニア、ウェブデザイナーを経て、2010年よりビジュアルシンキング運営開始。2014年12月よりNewsPicks編集部でインフォグラフィックス・エディターとして記事執筆。研修・インベント講師や書籍執筆も行なっている。著書に『たのしいインフォグラフィック入門』ほか。

20 Mar, 2012