[HTML5J 第47回HTML5とか勉強会] データ・ビジュアライゼーションの現況と実際

2,662 views
2,447 views

Published on

2014/04/18 (金) 第47回HTML5とか勉強会(データビジュアライゼーション)での登壇資料です。

http://html5j.doorkeeper.jp/events/10518

Published in: Design
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,662
On SlideShare
0
From Embeds
0
Number of Embeds
811
Actions
Shares
0
Downloads
32
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

[HTML5J 第47回HTML5とか勉強会] データ・ビジュアライゼーションの現況と実際

  1. 1. データ・ビジュアライゼーション の現況と実際 第47回HTML5とか勉強会(データビジュアライゼーション) 2014/04/18 (金) 19:30 - 21:30 http://html5j.doorkeeper.jp/events/10518
  2. 2. データ・ビジュアライゼーション?
  3. 3. インフォメーション・グラフィックと データ・ビジュアライゼーション
  4. 4. • 人が手作業かグラフィックアプリケーションで描いている。 • 手元にあるデータの特性を作者が理解し、その特徴を最大化するために表現が選 ばれる。 • そのため、別のデータを使用して再作成するのが容易ではない。 • 表示についてのルールとその例外ルールについて、作者以外の外部から、すべて を推測することが難しい。 • 参照したデータとの関連性の証明が難しい。 • インタラクションがないものが多い。 インフォメーション・グラフィック
  5. 5. http://elections.nytimes.com/2012/results/president
  6. 6. データ・ビジュアライゼーション • あるデータセットが、予め用意されたアルゴリズムを用いて、コ ンピュータによって描画されること。 • その描画によってデータセットを眺めているだけではわからない 傾向や特徴が明らかになっていること。 • アルゴリズムはコーディングによって定義され、チャートやグラ フとして発達してきた表示形式を用い、形式知化/可視化されて いること。 • ソート、フィルター、トグルなどのインタラクションが可能で、 その場でその結果がすぐ得られること。 • 利用しているデータセットが可視化されていること。 http://visualizing.jp/infograph_vs_dataviz/
  7. 7. 今起こっていること 1. Open Data 2. Creative Coding 3. Visualization Practitioner オープン・データ クリエイティブ・コーディング ビジュアライズの実務者
  8. 8. 1. Open Data オープン・データ
  9. 9. 経緯と流れ 2004年∼ UK 2009年∼ USA 2012年∼ 日本
  10. 10. オープン・ガバメント オープンガバメント シンポジウム Wiredカンファレンス 2013 東京大学公共政策大学院 http://wired.jp/conference2013/ http://www.pp.u-tokyo.ac.jp/events/2013-11-19/
  11. 11. オープンデータとは 利用できる、そしてアクセスできる データ全体を丸ごと使えないといけないし、再作成に必要以上のコストがかかってはいけない。 望ましいのは、インターネット経由でダウンロードできるようにすることだ。また、データは 使いやすく変更可能な形式で存在しなければならない。 ! 再利用と再配布ができる データを提供するにあたって、再利用や再配布を許可しなければならない。また、他のデータ セットと組み合わせて使うことも許可しなければならない。 ! 誰でも使える 誰もが利用、再利用、再配布をできなければならない。データの使い道、人種、所属団体など による差別をしてはいけない。たとえば「非営利目的での利用に限る」などという制限をする と商用での利用を制限してしまうし「教育目的での利用に限る」などの制限も許されない。 http://opendatahandbook.org/ja/what-is-open-data/index.html http://opendefinition.org/od/japanese/
  12. 12. 「オープンデータが使えることで恩恵を受けることができる団体や 組織も多い。もちろん政府自身だってそのひとつだ。しかしその一 方、その恩恵を将来どこでどんなふうに得られるかを正確に予測す るのは不可能だ。イノベーションというものは、たいてい予期せぬ ところから生まれるものなのだから。」 社会をよくするために 「各種データの新たな組み合わせは新しい知識や知見をもたらす可 能性があ」る 「手つかずの可能性を解き放てるだろう。」 http://opendatahandbook.org/ja/why-open-data/index.html
  13. 13. メディアやNPOによるオープンデータの活用 データ・ジャーナリズム/社会学的アプローチ
  14. 14. 2. Creative Coding クリエイティブ・コーディング
  15. 15. MIT Media Lab / Ben Fry & Casey Reas Processing (Java) Parsons The New School for Design / Zach Lieberman, Theo Watson & Arturo Castro openFrameworks (C++ & C#) the Stanford University s Stanford Visualization Group / Mike Bostock D3.js (JavaScript & SVG) Visualization Toolkits
  16. 16. Ben Fry Mike Bostock Visualization Toolkits Makers Casey Reas Zach Lieberman Theo Watson Arturo Castro
  17. 17. 3. Visualization Practitioner ビジュアライズの実務者
  18. 18. d3 アンカンファレンス @ GitHub本社
  19. 19. d3 アンカンファレンス @ GitHub本社
  20. 20. 可視化のための実際のコードを 書く人たちが求められている • パーソナルコンピュータ、モバイルデバイスの劇的な価格低下と高 性能化 • 第二次ブラウザ戦争の遺産としての非常に高速化された JavaScriptエンジンとCanvasをはじめとするHTML5関連テク ノロジー • クライアント関連テクノロジーのブラウザへの集約 • 各種デバイスから生み出される凄まじい量のデータ • それらを扱うためのオープンソースツール群の発展 • そしてそれらを利用したいスタートアップや大手企業の可視化分野 への関心 http://visualizing.jp/d3-unconf-2014-1/ by Keiichiro Onoさん http://visualizing.jp/d3-unconf-2014-2/
  21. 21. データをビジュアライズ
  22. 22. 1.抽象化して理解する データそのものから特徴 や性質を掴むことが困難 特徴を理解できる 他のものと組み合わせられる
  23. 23. 2.「なるほど!」と思って共感する なるほど! 理解から共感へ
  24. 24. 料理にも似ている 食材の 下ごしらえ 調 理 食材としてのデータ、料理方法としてのビジュアライズ
  25. 25. Data
  26. 26. データはどこにある? • 各国のデータカタログサイト • 国際機関(国連、世銀)のデータサイト • Wikipedia • SNS • 各種ウェブサイト • 専門家に聞く • 書籍 etc…
  27. 27. 「データは街に れている」 http://portal.nifty.com/2007/08/01/a/
  28. 28. 自分のアクティビティ・データは実は意外とオープンデータではない Quantified Self
  29. 29. アクティビティ・データ・サービスにおけるTwitter
  30. 30. 人間ドッグのデータ ・XMLファイルで提供してくれる病院がある。
  31. 31. データのクレンジング
  32. 32. データのクレンジング • コラムごとのデータ形式の変換 • データ形式が間違っているものを 検出(数値のコラムに文字列など • データの重複を探し出す • 表記揺れの解消 • エラー値の検出と処理 • 空白の検出と処理 http://openrefine.org/
  33. 33. Visualize
  34. 34. ヴィジュアライズ=ものの見方
  35. 35. ギリシャ…熊 日本…柄杓中国…雲の上に 座っている王朝 北斗七星
  36. 36. 視点のある場所によって、 見える景色が変わる 杉浦康平 - 時間軸変形地図
  37. 37. Objective vs Subjective • データヴィジュアライゼーションは可視化されたデータに基づくものなのだが、それでも主観 的な考えは入ってくる。 • 主観的な考えを完璧に排除することは難しいが、多面的な視座を提供することで、解釈する余 地や幅を持たせてあげることが肝要。
  38. 38. Workflow
  39. 39. 「ビジュアライジング・データ」によるワークフロー • 手軽で強力なプログラミング環境「Processing」を用いた情報視覚 化技術についての解説書。 • 地図情報・階層ファイルシステム・リスト・グラフ構造・時系列デー タなど、さまざまなデータの収集・解析手法から対話的な視覚化手 法・プログラミングテクニックまでを豊富な実例を用いて詳しく解 説している。(出版元サイトより) http://www.oreilly.co.jp/books/9784873113784/
  40. 40. 「Data Journalism Handbook」によるワークフロー • ロンドンで開かれた MozFest 2011での48時間ワークショップの集 大成 • BBC、シカゴトリビューン、ガーディアン、フィナンシャルタイムズ、 ニューヨークタイムズ、ワシントンポスト、テキサストリビューンな どが参加。 • データ・ジャーナリズムの知識共有や実例集。 http://datajournalismhandbook.org/
  41. 41. ワークフロー
  42. 42. 正規化
  43. 43. 正規化 • 1回正規化されたデータは、様々な表示スタイルに利用可能。 • 異なるデータを同様に扱うことができる。 • プログラムが生成する値との親和性 • 正規化と補間は、正比例で入出力がなされるべきとは限らない。 正規化する理由
  44. 44. Transitions • ユーザーに変化を見失わせない。 • 五感に訴えかける。 ポイント ある属性の値を一定の時間で変化させること。  属性=座標値、大きさ、色、透明度…
  45. 45. http://easings.net/ja iOS6でのspotlightへのスワイプがわかりやすい例
  46. 46. ビジュアル・アプリケーション 問題の定義 データ型 次元 データ構造 インタラクショ ンの型 伝達 探索 確認 定量的 順序 カテゴリー 一変量 二変量 三変量 多変量 線形 時間的 空間的 階層 ネットワーク 静的 転換可能 操作 「情報を見える形にする技術」Riccardo Mazza著
  47. 47. データ構造によるチャート分類 visualizing.jp
  48. 48. 変数の種類が多いデータセットを 2Dのディスプレイ上へどう表現すればよいか?1 2 3 4
  49. 49. 解決法 その1 同じグラフをそのまま増やす
  50. 50. 解決法 その2 散布図にすごくがんばってもらう(1)
  51. 51. GapMinder 4変量属性を表現http://www.gapminder.org/
  52. 52. 解決法 その3 散布図にすごくがんばってもらう(2)
  53. 53. 解決法 その4 いくつものグラフを組み合わせて ひとつのデータセットを表現する
  54. 54. http://nickqizhu.github.io/dc.js/vc/index.html dc.js
  55. 55. 解決法 その4 新しい手法を使う - 平行座標(Parallel Coordinates) - 平行セット(Parallel Set) - レーダーチャート(Radar chart) - チャーノフの顔(Chernoff face)
  56. 56. 平行座標(Parallel Coordinates) 平行に配置した任意の数の軸で幾何学空間を定義。定量/順序/カテゴリーで使える。 https://sensortower.com/visualizing-the-ios-app-store
  57. 57. 平行セット(Parallel Set) 平行座標に近いが、カテゴリーデータに特化した表現方法 https://www.jasondavies.com/parallel-sets/
  58. 58. レーダーチャート(Radar chart) 複数の定量的なデータを一見して比較できる。 http://nbremer.blogspot.jp/2013/09/making-d3-radar-chart-look-bit-better.html
  59. 59. チャーノフの顔(Chernoff face) 複数の定量的なデータを顔の表情にプロットしたもの。 http://flowingdata.com/2010/08/31/how-to-visualize-data-with-cartoonish-faces/
  60. 60. ネットワークと階層 Visual Complexity The Book of Trees
  61. 61. http://cytoscape.org/ https://github.com/keiono/d3-layout-sample
  62. 62. 技術選定 SVG or Canvas or WebGL?
  63. 63. Big Dataのビジュアライゼーションを ブラウザー上でリアルタイムに実現するためのフレームワーク http://superconductor.github.io/superconductor/
  64. 64. http://raw.densitydesign.org/ http://raw.visualizing.jp/#/
  65. 65. http://www.mathworks.co.jp/products/statistics/
  66. 66. Wrap Up
  67. 67. データ・ジャーナリズム
  68. 68. DPC調査データ
  69. 69. 世界価値観調査
  70. 70. この世にし 楽しくあらば来む世には 虫に鳥にも我れはなりなむ ! 大伴旅人 http://www.tachibana-akira.com/2012/05/4292 日本人の極端な世俗性として仏教哲学者の中村元さんが指摘
  71. 71. 地域の課題を テクノロジーを活用して解決する 市民参加型のコミュニティ運営 「パターン・ランゲージ」 建築における

×