• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
[HTML5J 第47回HTML5とか勉強会] データ・ビジュアライゼーションの現況と実際
 

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

on

  • 1,292 views

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

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

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

Statistics

Views

Total Views
1,292
Views on SlideShare
812
Embed Views
480

Actions

Likes
7
Downloads
16
Comments
0

7 Embeds 480

http://visualizing.jp 376
http://scrtree.github.io 83
http://shuku2.tumblr.com 10
http://plus.url.google.com 4
http://s.deeeki.com 4
http://www.slideee.com 2
http://webcache.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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