はじめにIntroduction

本制作は、時系列データの可視化に適したインフォグラフィックスの作成についてまとめたウェブサイトである。ウェブサイト上で時系列データの可視化に適したインフォグラフィックスを生成するために、既存の時系列データを可視化したインフォグラフィックスの分類・分析を行い、それぞれのデータと目的に適したインフォグラフィックス作成のための情報を整理したものである。

インフォグラフィックスとはInfographics

"インフォグラフィックスとは、複雑な内容やイメージしづらい物事の仕組みなどを、把握・整理し、視覚的な表現で、他の人に情報をわかりやすく伝えるグラフィックデザインのこと。"(木村博之 著 『インフォグラフィックス 情報をデザインする視点と表現』より)であり、主に新聞等のニュースを扱う報道機関で情報を視覚的にわかりやすく伝えるために使用されるようになったものである。

インフォグラフィックスの構成要素 (木村博之氏の分類方法による)

ダイアグラム

ダイアグラム…主にイラストを用いて物事を説明・図解する。

チャート

チャート…図形や線、イラストなどを用いて相互の関係を整理する。

表

…情報をある基準で区分し、縦軸・横軸上に整理する。

グラフ

グラフ…数値の大きさで比較や変化・推移を表す。

地図

地図…一定の地域・空間における位置関係を表示する。

ピクトグラム

ピクトグラム…文字を使わず、絵で物事を直感的に伝える。

分析内容Analysis

既存の紙媒体におけるインフォグラフィックスの使用例として、新聞における時系列データを扱ったインフォグラフィックスの分類・分析を行った。

具体的には、朝日新聞縮刷版[東京] 2008年1月分/2009年1月分/2010年1月分の過去3年3ヶ月分の紙面から時系列データを扱ったインフォグラフィックスを抽出し、それぞれの構成要素によりタイプ別に分類、それぞれの出現頻度、紙面ジャンル別のデータを分析した。(但し、広告やセンター試験解答等の報道に直接関係のないものは含まず。)

分析結果として、新聞紙面に出現するインフォグラフィックスは6分類のうちチャートとグラフで全体の85%を占めており、グラフについては、折れ線グラフ50%、棒グラフ35%、複合グラフ15%(折れ線グラフと棒グラフ)の3種類で構成されており、チャートについては、年表78%、フローチャート16%、タイムライン6%(時間軸が横軸のもの)の3種類で構成されていた。またグラフは数値データ、チャートは文字列データを扱っており、その他のダイアグラムやピクトグラムは、補助的な役割で使用されていた。

そこで、8割以上を占めるチャートやグラフの系列等の構成要素を細かく分析した結果、チャートやグラフが成立するための傾向が浮かび上がった。時系列データを可視化したインフォグラフィックスは、全て複数の比較データ(系列)から構成されており、それらの値が時間の経過と共にどのように変化・推移するかを視覚的に表現したものであり、比較データの数(系列数)と各々の関係性、さらにそのデータが数値データか文字列データかによって、インフォグラフィックスがどのようになるかを分けることができた。

これらの分析結果をもとに、ウェブ上で可視化したい時系列データのジャンル、比較データ数、数量単位、時間単位に応じた最適なインフォグラフィックスの提示を行うことにした。具体的には、各ライブラリで作成可能なインフォグラフィックスを調査し、それぞれの項目を一覧できる比較表を作成する。その上で分析結果をもとにウィザード形式でユーザーに問いかけ、作成可能な項目が含まれるライブラリの絞り込み表示を行うようにした。また、各ライブラリの実際の使用例も示し、よりユーザーのニーズにあったインフォグラフィックスの作成を可能にした。

時系列データの可視化支援ツールSupport

数値データの可視化をサポートします。

インフォグラフィックスから作成に必要なライブラリーを表示

イメージするインフォグラフィックスを選択して下さい。

  • 単一棒グラフ
  • 単一折れ線グラフ
  • 複数棒グラフ
  • 積み上げ棒グラフ
  • 複合グラフ
  • 複数折れ線グラフ
  • 表・年表
  • タイムライン

リセット

考察Consideration

本研究の新聞データの分析は、タスク分析を用いてデザイナーがその作業をどのようにこなしているか、必要な情報は何か、特別な状況や事態をどう扱っているかを調べるという手法で行った。その結果、今までデザイナーが感覚的もしくは経験則によってインフォグラフィックスを作成していたと考えていたものが、実態を整理・分類することでインフォグラフィックス作成に必要な要件として表すことができた。

例えばグラフの中でも複合グラフになる場合は、系列数が3つ以上あり最大値の系列内に他の系列を分類できない比較データであることが明らかになったが、どのデータが棒グラフ、折れ線グラフになるのかは、それだけでは決定しきれないため、タスクをさらに細かく分解し実際の現状にあてはめて判断する必要があった。実例として数社の売上高と営業利益を比較したデータの場合では、圧倒的に売上高が棒グラフとなり、営業利益が折れ線グラフとなることが多かった。

これらのことから蓄積された経験や感覚といったデータ化することが難しい事柄をタスクとして細かく分解しステップごとに整理することで、それぞれのユーザーのニーズに合ったサポートを提供できると感じた。タスク分析の結果で分類に迷う特殊なケースについては、背景として存在する「要件」を意識して、いかに効率的にインフォグラフィックスの作成をサポートできるかを考え、ユーザーのニーズとして分類することが重要であると言える。

ライブラリData Visualization Libraries

代表的な可視化ライブラリの紹介と使用例

Google Chart Tools

URL: http://code.google.com/intl/ja/apis/chart/

Googleが提供するAPIによる生成ツール。シンプルな折れ線グラフから複雑なツリーマップまで多数の綺麗にデザインされたチャートの生成が可能で、サポートするインフォグラフィックスの数はかなり豊富である。このライブラリ1つでおそらくほぼすべての要求を実現してくれるといっても過言ではない。Google API専用のGoogle Code Playground を使用すればオンライン上でソースの確認と生成が可能。 HTML内にスクリプトを読み込み、チャートに応じたコードを記載すれば生成される。HTML5とSVGをサポートするのが特徴でiOS端末やAndoroid端末での表示も可能である。

複合グラフの作成例

グラフデータ

ソース

SIMILE Widgets - Timeline

URL: http://www.simile-widgets.org/timeline/

簡単に美しくてインタラクティブなタイムラインが生成可能なライブラリー。横軸が時間の経過を表し、そのタイムライン上の出来事は点で表現され、それぞれの点をクリックすればツールチップで詳細が表示される。もちろんマウスを使って横方向にスクロール可能で長い期間のデータも簡単に読み取ることができる。タイムライン表示に特化したライブラリー、それがTimelineといえるだろう。キーワードでフィルターをかけたり、タイムライン上に画像を配置することも可能。JSONによるデータの呼出も可能。

JSONファイルを使用したタイムラインの作成例

JSONファイルの記述例

ソース

Rgraph (HTML5 Javascript)

URL: http://www.rgraph.net/

HTML5のCanvasタグを使ったjavascriptによるインタラクティブなライブラリー。クライアントサイドであるjavascriptを使うことによって、サーバーの処理とは関係なく、ブラウザ上で高速な描画を実現。非商用ライセンスは無料で使用可能。商用利用は別途$120ほどで商用ライセンスの購入が必要。

積み上げ棒グラフの作成例

[No canvas support]

データ元:東京都福生市公式ホームページ:市政情報 平成22年度決算

グラフデータ

ソース

Highcharts

URL: http://www.highcharts.com/

jQueryベースのライブラリー。Internet Explorer 6を含む全てのモダンブラウザに対応しており、iPhoneやiPadでの表示も可能。ウェブサイトやウェブアプリケーション等、広い範囲で使用可能である。 基本的なブラウザでの描写はSVGで行い、古いタイプのIEはVMLで行なっている。大きな特徴はエクスポート機能を備えており、JPG,PNG,SVGに加えPDFでの出力が可能となっている。印刷用データの出力も可能。 商用利用の場合は、$80〜の商用ライセンスを購入する必要がある。

積み上げ棒グラフの例

データ元:時事ドットコム:【図解・政治】参院選・過去4回の各党当選者数

グラフデータ

ソース

Infovis

URL: http://thejit.org/

JavaScriptによるデータ可視化ライブラリ。データはJSON形式で読み込み、2つのデータを用意することでアニメーションによるデータ更新が可能。時系列データ以外にも多彩なデータの可視化が可能なライブラリ。相関図やツリーマップなど複雑な構造のデータもアニメーションで表現。MITライセンスのオープンソースソフトウェア。

積み上げ棒グラフの例

グラフデータ(更新前のデータ)

ソース

example.jsの記述内容

JS Charts

URL: http://www.jscharts.com/

JavaScriptによるグラフ作成ライブラリ。かなりシンプルなコーディングで実装可能。データはJSON、XML、配列から読み込む。読み込みデータ内にグラフの細かな設定を記述することが可能なため、HTML本体のコーディングがシンプルになる。グラフごとの追加プラグインなどは不要で、コアファイルに全てのモジュールが含まれている。アニメーション対応で系列ごとの表示・非表示も可能。IE6からスマートフォンまで幅広いブラウザに対応。

折れ線グラフの例

画像素材:東京発フリー写真素材集/政府関連~その1

グラフデータ(更新前のデータ)

ソース

data.jsonの記述内容

Bluff: Beautiful graphs in JavaScript

URL: http://bluff.jcoglan.com/

JavaScriptによるグラフ作成ライブラリで、描画はCanvasで行う。初めからスタイルの設定されたテーマが数種類用意されており、テーマを指定することで容易にビジュアルを変更することが可能。また、任意のIDを付与したtable要素からのデータ読み取りにも対応しており、他のライブラリよりも比較的容易に導入することができる。IEでCanvasを使用するためにライブラリにはGoogleで公開されているexcanvas.jsが同梱されている。MITライセンスのオープンソースソフトウェア。

折れ線グラフの例

グラフデータ

ソース

TufteGraph

URL: http://xaviershay.github.com/tufte-graph/

jQueryベースのグラフ作成ライブラリ。描画はSVGで行い、CSSでスタイリング可能。 棒グラフ専用ライブラリ。積み上げ棒グラフに対応。

積み上げ棒グラフの例

グラフデータ

ソース

jqBarGraph

URL: http://www.workshop.rs/jqbargraph/

jQueryベースのグラフ作成ライブラリ。描画はdivの制御、CSSでスタイリング可能。 アニメーションによるダイナミックな表示が可能な棒グラフ専用ライブラリ。積み上げ棒グラフに対応。

棒グラフの例

ソース

CSV2TABLE

URL: http://www.workshop.rs/jqbargraph/

jQueryベースでCSVデータから表(table)の作成が可能なライブラリ。このページでもグラフデータを表示するために使用している。 注意点は、使用するCSVデータの文字コードがUTF-8エンコードで改行コードがCR+LFにする必要があるため、エクセルなどから直接書きだしたCSVを使用してもうまく表示できない。文字コードの変更が可能なエディター等で書き換える必要がる。

表の例

ソース

フローチャート作成ツール(ウェブサービス)

現在のところライブラリを使用したフローチャート作成方法は、ほぼ存在しないため、それに代わる手段としてウェブ上で容易にフローチャートを作成することが可能なサービスをいくつか紹介する。エクスポート機能を使って生成された画像をページに組み込むと良いだろう。

LucidChart

URL: http://www.lucidchart.com/

一般的なフローチャートが容易に作成可能なサービス。フローチャート以外にもワイヤーフレームやiPad・iPhoneのサイト制作やアプリ開発に役立つモックアップ作成も可能。無料版と有料版でいくつかのライセンスに分かれている。利用にはユーザー登録が必要でが、デモ画面で体験することが可能。無料版はオンライン保存容量が25MBで、2ユーザまで共同編集編集可能。1つのドキュメントに60個までのオブジェクトしか作成できない。

FLOWCHART.COM

URL: http://flowchart.com/

無料だが招待制によるユーザー登録が必要。デモ画面で実際の画面を体験することが可能。複数のユーザ同士で同時編集も可能。