Fork me on GitHub

役立ちぬ開発史、それはただのブログ

覚えておくといい、ブログの時代は終わる。いつかその内、きっとたぶん…

第47回HTML5とか勉強会(データビジュアライゼーション)のまとめとメモ

| Comments

社会人になってから、初めての勉強会です。html5jのコミュニティの広さなのか。この勉強会の公募が始まって、6時間で150席が埋まりました。
すごい…。たまたま、入れてよかった。

勉強会の動画

データ可視化について

[@muddydixon][1]さんのセッション ###メモ **データの可視化の目的** [Vitaly Friedman][2] - ☓どう可視化するか? - ◯目的達成の可視化するか? - ◎何のために可視化するか? **可視化の目的** - メトリクス - トレンド - 関係性 - 属性の分析 **ダメな可視化** - 効率的でない - 項目がいちいち多い - 明確でない - グラフがパッと見て意味が分からない - メモリの軸がおかしい もっと画像を知りたければここ見ろ http://wtfviz.net/ - 情報を伝えそびれている - 明確でない - 効率でない 上記は可視化では**ありません**。 基本的に軸がないものはダメ しかし、トレンドだけ知りたい場合は、軸はいらない。 これはありだと思う。 こういう前提がない状態では、上記は可視化ではない。 **可視化の定義** パッと見て、わかるもの可視化。 **可視化するとなぜいいのか** 数字だけではわからないものが、グラフを大きさや円グラフの半径、折れ線で引くなどで分かりやすくなる。 いくつかの数字を、奇数や偶数で色をつけるだけでもわかりやすい。 例えば、座標で表した時に、赤青の色だけで分けただけでも、どこにあるのかが直ぐにピンと来る。 数字だけでも、関係性はわかるが、時間がかかる。 なので、視覚を使って、人間の知識を効率的に促進。 **認知機能・経験をフルに使う** - みんな大好きiris - パッと見て分からない。 - 統計量で表現 - 分からないわけではない。でも、わかりづらい。 - 図形の経験・認知能力を利用 - 偏りや分布の広がり、高さがどうなのか。ヒストグラムでも、変化が見て取れる。 **「認知」が「把握」を加速** ヒストグラムだけでもいい。 色分けすると、より違いがわかる。 **可視化の理論** - データセット(変数抽出) <-> 可視化 - データ <-> 視覚記号 - データ変数 <-> 視覚変数 **可視化の概念(理屈上)** - 図のそれぞれが対応 - 色には向いてる、向いてないがある。 **データ変数 / 視覚変数** - 色で分ける -> ピンと来る - 傾きとかなどを入れる -> 見づらくなる - 色々データを載せすぎる -> わからなくなる 色だけでいい。 **データ変数の尺度** - 名義尺度 - カテゴリ - 順序尺度 - 徒競走 - 等差尺度 - 日付 - 比例尺度 - 人数 **視覚変数の特性** - 選択性 - 色、方向 - 関連性 - 色、形状 - 定量性 - サイズ 順序性 - 強さ(明るさ、彩度など) **視覚変数の特性(推奨)**

webでの可視化

可視化は、R、エクセル、パワポでも出来る。
webでの可視化が向いてるもの

利点

  • webでの共有
  • マウスやキーボードによるインタラクション
  • アニメーションが使える
    • 時間軸を使うことで、表現できるデータ変数を1つ増やせる。

  • https://github.com/square/crossfilter
  • http://www.cs.umd.edu/
  • https://www.youtube.com/watch?v=ezVk1ahRF78#t=4m23s

SVG

  • Scalable Vector Graphics
  • 大きくしても綺麗
  • XML Document

SVGで使えるタグは沢山あるけど、使うのは5種類だけでいい。

SVGについてはこちらを

**D3.jsのはなし** [D3.js][4] - サンプルが充実 - コピペするとなんでもできる - SVGの操作(DOMの操作)+数値処理+可視化ユーティリティ の総合JSライブラリ - JSのマスのmin,maxをとってくれる。 - 配列を入れ子にする関数があったる - データの配列自体を計算し直してくれる **作成するときのコツ** - SVGは基本 - あとで追加したものが上に表示 - テキスト周りは難しい **まとめ** 可視化の目的は、改善行為の促進。 ##5jcupについて [@Shumpei][5]さんの告知 ###メモ https://5jcup.org/ **5jcupとはなにか?** webデザイナー・webエンジニアのクリエイティブコンテスト 日本が、世界のwebシーンをリードする。 web技術力を上げる - すごいところ - 賞金がすごい! - 賞すごい! - すごく盛り上がる(希望)! - アイデアソン✕3 - ハッカソン✕3 日本のwebをたぎらせろ! ##データ・ビジュアライゼーションの現状と実際 [@yuichy02][6]さんのセッション ###メモ ここの人。 http://visualizing.jp/ **今までやったことの概要** - cerevoのロゴ - コードフォージャパンのロゴ - 防災ハッカソン・Race for Resilience - NASA主催ハッカソンのロゴ - VJのアプリケーション作成 **インフォメーション・グラフィックとデータ・ビジュアライゼーションの違い** インフォメーション・グラフィック - 人が手作業でグラフィックアプリケーションで描く - インタラクションはない データ・ビジュアライゼーション - コンピュータで描画 - 形式知化・可視化 - インタラクションあり 今日のデータ・ビジュアライゼーション **1.オープンデータ** - [data.gov.uk][7] 2004年にイギリスでスタート - [data.gov][8] 2009年にアメリカ - [アイデアボックス][9] 2012年に日本 オープン・ガバメント - [ワイアードカンファレンス][10] - [オープンガバメントシンポジウム][11] オープンデータとは - 誰でも使える - データを再利用できる 何をするのか - 社会をよくするために メディアやNPOがオープンデータを活用している **2.クリエイティブ・コーディング** ビジュアライゼーション・ツール - [processing][12] - [D3.js][13] - [openFreameworks][14] **3ビジュアライゼーション・プラクティショナー(ビジュアライズの実務者)** [D3アンカンファレンス][15] ->可視化するためのコード書く人が求められている。 データをビジュアライズするために - 抽象化して理解する - 「なるほど!」っと思って共感する データはどこにある? - 各国のデータカタログサイト - 国際機関のデータサイト - 専門家に聞く - などなど… [Quantified Self][16] 自分のアクティブティ・データは、実は意外とオープンデータではない アクティブティデータのムース **ビジュアライズ** ビジュアライズ=ものの見方 視点のある場所によって見える景色変わる 例:) 杉浦康平 「時間軸変形地図」    20〜30年前の手作業の結晶 Objective VS Subjective **ワークフロー** - Visualizing Data - データのビジュアライゼーションをどう書くのかについての本 - data journalism handbook - ジャーナリスト視点の本

正規化

ベクトルの正規化
プログラムが生成する値は、もともと正規化されている

データ構造によるチャート分類

  • 同じグラフをそのまま増やす
  • 散布図にすごく頑張ってもらう
    • 散布図にすごく頑張ってもらう2
  • 幾つものグラフを集めて一つにまとめる
  • 新しい手法を使う
    • 並行座標
    • 並行セット
    • レーダーチャート
    • チャーノフの顔

ネットワークと階層

オススメのサイト

cytoscape

Superconductor
ビックデータをビジュアライゼーションするフレームワーク

RAW
データを簡単に可視化が出来る

MATLAB
安くなっていた。
home edition -> 1万5千円
商用は無理

DPC調査データ

World Value Survey

Comments