データの可視化 20140208
TRANSCRIPT
某通信会社アナリスト
後藤真理絵
インフォグラフィックス、データビジュアライゼーションとは?
information + graphics data + visualization データ(=情報)を その分野に詳しくない人にもわかる形で伝え、 思考やアクションを促すための手法の一つ
http://www.bowlgraphics.net/tsutagra/03/
インフォグラフィックス、データビジュアライゼーションとは?
どうやって作るのか?
1. キーメッセージを決める どんなアクションを促したいかのビジョン 2. データを探す 3. キーメッセージの特性がわかるデータ加工の実施 4. キーメッセージを際立たせる情報精査 キーカラー、量的な差を見せる時の比率、カテゴリーの見直し 5. 図形やモチーフを用いたでの表現 グラフだけではなく、地図や図形・アイコンの形、大きさでも表現する
データの可視化で使える(かもしれない)見せ方の組み合わせ
A) 量的な違いを見せる(高さ、長さ、幅、面積、数、ギャップ)
B) 質的な違い(色、形、シンボル等でカテゴリーが違うことを明示)
C) 順序を見せる(ランキング上位、下位。記号順、順番)
D) 地理的関係を見せる(地図上にマッピング)
E) 変化を見せる(時系列グラフ、年表)
F) 流れを見せる(何かのフロー、ステップを解説するもの)
G) 物事の関係を見せる(関係図、モデル図、構造図)
※実数で見せるか、割合で見せるか、比率、○○何個分など基準値で見せるか
※ピクトグラム、国旗
http://www.newyorker.com/sandbox/business/subway.html The New Yorker New York 地下鉄沿線の平均年収グラフ
http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html?_r=1&
New York Times オバマ政権の2013年度予算案
http://www.nytimes.com/interactive/2012/12/30/multimedia/2012-the-year-in-graphics.html?_r=0
New York Times Visualizationコーナー
http://www.bbc.co.uk/news/10373060
BBC 国家予算の削減が日常生活に与える影響
WHITE HOUSE SHAREABLES オバマ政権の政策を可視化して伝える公式サイト http://www.whitehouse.gov/share/all
オープンデータで「食の日本地図」 家計調査(2005 - 2012年)より http://opendata.nikkei.co.jp/article/kakei-chosa-2005-2012/#did=1.1.1&year=2012
Visualizing.org(ビジュアライズ作品投稿サイト)World Bank Global Development Sprint http://www.visualizing.org/sprint/global-development-sprint
事例
手軽に見てみる・使ってみるために使えるサイト・ツール
サイト名 特徴
visual.ly
★作品投稿・共有機能 一般ユーザーや企業がインフォグラフィックス作品を自由に投稿できる。 FacebookやTwitterなどソーシャルメディアボタンで拡散可能。 静的・動的・動画インフォグラフィックスなど多様。
infogra.me
★作品投稿・共有機能 一般ユーザーや企業がインフォグラフィックス作品を自由に投稿できる。 FacebookやTwitterなどソーシャルメディアボタンで拡散可能。 静的インフォグラフィックスが中心。
infographic.jp
★作品投稿・共有機能 自社制作のインフォグラフィックスを事例として掲載。 FacebookやTwitterなどソーシャルメディアボタンで拡散可能。 静的インフォグラフィックスが中心。
サイト名 特徴 その他特徴
Piktochart
★デザインツール提供 テンプレートを選択するとアイコンやピクトグラムなどの素材が提供される。 グラフ自動作成機能がある。 キャンバス上でPhotoshopのように編集して作成するためデザインの自由度は高い。 フリーミアムの形態で無料版と有料版がある。無料版は7つのテンプレートを使用することができ、有料版ではSEO対策も可能。
一般ユーザーがPiktochartで作った作品を自由に投稿できる。 FacebookやTwitterなどソーシャルメディアボタンで拡散可能。
infogr.am
★デザインツール提供 フリーミアムの形態で無料版と有料版がある。 グラフやモデル図、ワードクラウド等の図表作成に特化し、データをアップロードすると自動的に作成される。基本的に決められたパーツの並べ替えで作成するため自由度は低め。
ツールで制作した作品のPublish(Web公開)機能あり FacebookやTwitterなどソーシャルメディアボタンで拡散可能。
easel.ly
★デザインツール提供 テンプレートを選択するとアイコンやピクトグラムなどの素材が提供される。ベータ版。 グラフ自動作成機能はないため、フロー図や概念をまとめる時に最適。 キャンバス上でPhotoshopのように編集して作成するためデザインの自由度は高い。
ツールで制作した作品のPublish(Web公開)機能あり
共有サイト
デザインツール(無料版あり。ブラウザで作成可能)
プログラムができるエンジニアタイプ向け
https://developers.google.com/chart/
Google Chart Tools API
http://d3js.org/
D3.js javascriptライブラリ ※下記サイトに作品事例多数掲載あり
http://d.hatena.ne.jp/Mariyudu/20121015/1350305219
その他のライブラリ、API等 データを可視化する 20 のツールAdd Star(日本語版) ※エンジニア向けのjavascriptライブラリ、言語紹介が豊富なブログ
http://www.netmagazine.com/features/top-20-data-visualisation-tools
※上記の英語元記事