D3で切り開く
ジオ・データ・ビジュアライゼーション
の可能性

第12回 ジオメディアサミット〜ジオデータビジュライズの世界〜

Yuichi Yazaki / visualizing.jp / toy-by-algorithm.com

自己紹介

  • 矢崎裕一
  • インターフェイス・デザイナー/コーダー/トイ・コンサルタント

インフォグラフィック
vs
データ・ビジュアライゼーション

インフォグラフィック

  • 人が手作業かグラフィックアプリで描いている。
  • 手元にあるデータの特性を作者が理解し、その特徴を最大化するために表現が選ばれる。
  • そのため、別のデータを使用して再作成するのが容易ではない。
  • 表示についてのルールとその例外処理について作者以外の外部からすべてを推測することが難しい。
  • 参照したデータとの関連性の証明が難しい。
  • インタラクションが(ほぼ)ない。

データ・ビジュアライゼーション

  • あるデータセットが、予め用意されたアルゴリズムを用いて、コンピュータによって描画されること。
  • その描画によってデータセットを眺めているだけではわからない傾向や特徴が明らかになっていること。
  • アルゴリズムはコーディングによって定義され、形式知化/可視化されていること。
  • ソート/フィルター/トグルなどのインタラクションが可能で、その場で結果がすぐ得られること。

コーディングによるデザイン
ビジュアライゼーション・ツールキット

データ・ビジュアライゼーション
meets
ブラウザー

D3.js (2011年〜)

Show Reel

D3 Show Reel from Mike Bostock on Vimeo.

D3.jsの持つ機能一覧

選択、アニメーション、タイマー、補間、配列操作、ランダム、外部リソースの読み込み、テキスト/CSV整形、カラーユーティリティ、スケール、タイマー、レイアウト(Layout)地理(Geography)地図投影法(Map Projection)、幾何(Geometry)

D3:Selection(選択)

D3:Layout(レイアウト)

D3:Geography(地理)

D3:地図投影法(Map Projection)

more Projection...

more Projection...

more Projection...

more Projection...

more Projection...

more Projection...

more Projection...

日本用にほしいProjection

GoogleMaps、Leaflet.JSなどとの違い

  • 地形ファイル自体もGeoJson形式で読み込み可能。
  • MapProjectionが多数用意されており、選び放題。
  • スタイリングはすべて指定可能。

TopoJson

  • 国境や州境など複数の国や州が共有する地形データを重複することなく格納できる。
  • 一つの TopoJSON ファイルで、ポリゴン(フィル=塗り用)と境界線(ストローク=輪郭線用)の両方を、同じarcメッシュを共有する二つのフィーチャーコレクションとして効率的に表現することができる。
  • 座標計算に固定精度エンコーディングを用いることで正確性を犠牲にすることなく座標値の精度の丸め処理を省略できる。
ファイル形式を効率化することで、ファイルサイズを約80%削減!
(描画時にGeoJsonに変換しているので、変換にかかるコストの方がファイル転送コストより安い、という考え)

iPhone5S キャリア別通信スピード比較

東京の微地形模型

東京の微地形模型

結局ひとは自分の身体感覚や五感で世界を認識するので、そこに訴えると効果的な場合が多い。

Quantified Self      

自分のアクティビティ・データは
実は意外とオープンデータではない

たとえば、某プロダクトAPI

意義あるデータ・ビジュアライゼーション
をつくるために

  • 「複雑なデータを使って意義あるデータ・ビジュアライゼーションをつくるために必要な分野は…」
  • 「統計学、データマイニング、グラフィックデザイン、情報視覚化」
  • 「各分野はそれぞれ他の分野から独立して発達してました。(略)これらの分野を統一して単一のプロセスを構成する必要があります。」
  • 加えて…情報デザイン、地理情報システム、コーディング、ウェブにまつわる知識が必要(矢崎)

Visualizing Data

  • 手軽で強力なプログラミング環境「Processing」を用いた情報視覚化技術についての解説書。
  • 地図情報・階層ファイルシステム・リスト・グラフ構造・時系列データなど、さまざまなデータの収集・解析手法から対話的な視覚化手法・プログラミングテクニックまでを豊富な実例を用いて詳しく解説している。(出版元サイトより)
  • 上記フローチャートは本書掲載の「情報可視化のための7ステップ」

The Data Journalism Handbook

  • ロンドンで開かれた MozFest 2011での48時間ワークショップの集大成。
  • BBC、シカゴトリビューン、ガーディアン、フィナンシャルタイムズ、ニューヨークタイムズ、ワシントンポスト、テキサストリビューンなどが参加。
  • データ・ジャーナリズムの知識共有や実例集。
  • 上記フローチャートは本書掲載のデータ・ジャーナリズムのための3ステップ

両メソッドの比較

どんなことを意識すべきか?

1967年に戻ります

日本列島の地域構造・図集

  • 1967年 日本地域開発センター刊
  • シート126枚、白地図2枚が束ねて収容されている
  • 30 x 31 x 7.5cm、英文併記
  • 高度成長のピークにさしかかっているころ
  • 未来学が盛ん
  • 日本が世界のなかでどの位置にいるか知りたい、という要望
  • 建築家 丹下健三と地理学者 木内信蔵による、日本列島の構造のリサーチ統計をダイアグラムにまとめたもの
  • 多数の学者とグラフィックデザイナーを動員し制作に2年半かかった
  • この図集は、当時経済成長が進み、地域問題が浮上する中で議論の土台を作るために、様々な角度から日本列島の「今」の情報を視覚化することを狙って作られた。

日本列島の地域構造・図集

全体と部分を同時に描くことの難しさ

「棒グラフ、円グラフなどグラフの概念で捉えられる手法は、現象を定量的に鋭く表現するためにはなくてはならないものである。しかし量的な対比を明確に表示しようとすればするほど、複雑な構造をもった全体像の極小部分を切り取る形となり、全体像を見ようとすれば、継時的に多数のグラフをつき合わせて、観察者の思考過程の中で論理的な関係を組み立てなくてはならない。その点で、なまの数表を読んでいく場合と同じような、利用の限界がある。」

日本列島の地域構造・図集

性質の異なるものの相関を地図上で表すことの難しさ

「 地図の概念でとらえられるものは、量を表現する点・線・面などの図形あるいは定性的な記号-アイソタイプを地形図の上にプロットして現象の地域的分布を示すものである。地域間の対比はこれによって表現することは出来るが、性質の異なる諸指標間の相関関係を読み取ることは一般に困難である。構造モデル をあらかじめ想定して量的表示のパターンを標準化し、図上での相関関係を強調しようとすれば、それは主観を含んだ特定の論証に単に「さしえ(イラストレーション)」を付け加えるだけのことになる。」

杉浦康平 - 時間軸変形地図

杉浦康平 - 時間軸変形地図

  • 「『私がいる』…という出発点の位置による全体の激変」
  • 「俯瞰/統治型の国土管理地図の形と、文化の振る舞いをうつしだす地図の変化の差異が強調」
  • 「これにより『多視点』的思考法による『杉浦マップ』」

これからのデータビズに必要なもの

  • 全体と部分を行ったり来たりしながら比較的容易に、同時に理解できること
    • 全体像を直感的に理解できる
    • 木も見て森も見る
    • ビッグデータはじつは木も森もみれる
  • 「私」のステータスによって全体像が動的に変化すること
  • 既存の地図フォーマットにとらわれすぎずに、性質の異なるものの相関を表すこと
  • データの多角的な見方を用意することで、視野が多角的になる。
    • 「表現されたデータが民主的になる」杉浦康平