jscafe lt 4th_d3.js_20131110_ota
DESCRIPTION
グラフ理論TRANSCRIPT
LT 3rd TrialGraph Theory for Data Visualization
with D3.js
jsCafe vol.16 2013/11/10 At WAVE : Web Design & Programming School
Twitter ID:@otanet Hiromitsu OTA
自己紹介■Background (もともとの専門分野)廃棄物工学:「産業廃棄物の不法投棄の実証分析」 ・理論:ゲーム理論(情報の非対称性やプリンシパル・エージェント理論) ・実践:計量経済学(時系列分析)
→ ごみ処理事業者と委託者(市民)と警察とをプレイヤ―として、体系立てて、ごみの移動量のデータを用いて、地図上でどの県が不法投棄しやすいかなどを証明したもの。
↓■ 現在の専門分野: ・売上等のデータを見て、どのような分析手法が当てはまるかを考え、売
上予測や顧客をセグメントに分けて DM を打つなどの提案業務、 ・サイトの改修事例から、業界ごとの傾向などを見出し、体系化や分類を
して、パッケージ化すること。 Cf. 部分の最適化と全体の最適化。↓データ解析に、まずは数値データをグラフにするなどの可視化が必
須、 D3.js に着目しました。Cf. 発表等: http://www.slideshare.net/otanet/
2
今回の LT の背景1 .統計解析やデータマイニングのソフトウェア SPSS, SAS, R を使っていて、解析後のグラフがきれいで
ない! モデル構築に集中したい、グラフの作成をやり直すの
はしたくない。
2 .上記のツールのユーザを悩ます共通の課題がきれいな可視化になっている。
3 .そこで、 D3.js に着目しました!
4 .「 SPSS, SAS, R に D3.js を組み合わせて、アウトプットまで自動化できないか!」と考え、 D3.js を調べてみました。
3
今回のグラフ理論と D3.js との関係(その 1 )■ 本日の発表のメインはグラフ理論です!心の中の会話(↓):
A さん:これって、 D3.js と関係あるのか!B さん:いやー、ないっしょ!C さん: D3.js のチュートリアルやればいいでしょ!O さん:でも…ネットワーク図って、毎回、描画すると変わるよね。
A さん:まあー、確かに。B さん:それじゃ、今回のネットワーク分析のアウトプットはどれにするの ?C さん:たしか 3000 万の PJ だろー。なぜそうなるのか、説明できないとマズイよ。O さん:たしかにそうだよね。
A さん:再現性って、やっぱ必要だよね。B さん:じゃあ、ネットワーク図って、どうなって生成されてるの ?O さん:それって、何 ?
O ( tanet )さん:まずはグラフ理論さ!じゃあ、少し、理解を深めてみよう!4
今回のグラフ理論と D3.js との関係(その 2 )■ ネットワーク図の例
5
・影響の因果関係の合理性・コミュニィティの分類の正確性
グラフ理論 - しっておきたいこと‐■ グラフの定義や表記法とその構造 ■ グラフの用語 ・ 隣接と接続、次数…■ グラフの種類 ・単純グラフ、完全グラフ、非連結グラフ、重み付きグラフ
■ グラフの行列表示 ・隣接行列、接続行列、有効グラフの行列表示、有向グラフの強連結分解…
■スモールワールドネットワーク ・「世界中の人の中から任意に 2人を選んだとき、その 2人は何人の知人を介してつながっているか」 社会心理学者のミルグラムの実験
6
■ グラフの定義や表記法とその構造■ グラフの構造: ・典型的なグラフの例
7
a
c
b
e
d
ノード
エッジ
ループ
・ノード=頂点= vertex
・エッジ=辺=リンク
・ループ:あるノードから同じノードに対するエッジのこと
■ グラフの定義や表記法とその構造■ グラフの定義: ・グラフとは、いくつかの点と点を結ぶ線で構成される図
のこと。
⇒上記の図は、点が 6個( A, B, C, D, E, F )で、線が 9 本からなるグラフであるといえる。
※ 1. 線は曲線でもかまわない。長さや形状は問題にしない。線はただ、その 2点が結ばれているということのみを示すために書かれている。
※ 2. 「やさしいグラフ理論入門」小林( 2013 )より引用。8
FA
ED
B
C
■ グラフの定義や表記法とその構造■ グラフの表記(その 1 ):
グラフは通常、 G = (V, E) とあらわす。頂点の集合( V )と辺の集合( E )の 2 つで決まる。
右の図は次のようにあらわせる。V = {v1, v2, v3, v4, v5} 、E = {e1, e2, e3, e4, e5, e6}
9
v1
e6
v2
v3v4v5
e5
e1
e4
e3
e2
■ グラフの定義や表記法とその構造■ グラフの表記(その 2 ):辺( e1 )は頂点 v1 と v2 を結ぶ辺である。これを下記のように記す。e1 = {v1, v2}他の辺も同様に、e2 = {v2, v3}, e3 = {v2, v4}, e4 = {v1, v3}, e5 = {v1, v4},e6 = {v1, v5}
E = {e1, e2, e3, e4, e5, e6} の代わりに、E = {{v1, v2}, {v1, v4}, {v1, v5 }, {v2, v3}, {v3, v4}, {v4, v5}} とも書け
る。10
v1
e6
v2
v3v4v5
e5
e1
e4
e3
e2
■ グラフの用語■隣接と接続グラフ G において、下記の図のように、頂点 v1, v2 が辺 e1
で結ばれているとき、 e1 = {v1, v2} であるとき、頂点 v1, v2 を e の端点という。
またこの時、v1 と v2 は隣接 (adjacent) しているという。さらに、頂点 v1 と辺 e1 は接続 (incident) しているという。
11
v1 v2
e1
■ グラフの用語■次数・頂点に接続している辺の本数を、その頂点の次数 (degree)
という。
・問い:下記の図の頂点の次数を求めてみよう。
12
v5 v2
v4 v3
v1
■ グラフの用語■次数・頂点に接続している辺の本数を、その頂点の次数 (degree)
という。・問い:下記の図の頂点の次数を求めてみよう。
・解答: deg v1 = 3, deg v2 = 3, deg v3 = 0, deg v4 = 2, deg v5 = 2.
※ deg v3 = 0 の v3 を孤立点という。
13
v5 v2
v4 v3
v1
■ グラフの種類
■代表的なグラフの種類:
1 .(ラベル付き)単純グラフ
2 .完全グラフ
3 .非連結グラフ、
4 .重み付きグラフ
14
■ グラフの行列表示■隣接行列と接続行列定義:・隣接行列 (adjacency matrix) : 点 i と点 j を結ぶ辺の本数を第 ij 要素とする n × n の行列のこと。
• 接続行列 (incidence matrix) : 点 i が辺 j に接続している場合 , 第 ij 要素が 1 であり , 接続していない場合 0 であるような n × m の行列のこと。
15
■ グラフの行列表示■隣接行列と接続行列問い1 .下記の図のグラフの次数列を考えてみよう。2 .下記の図のグラフに対して隣接行列 A と接続行列 M を
考えてみよう。
・隣接行列の考え方:aij = 1 (頂点 vi と頂点 uj が隣接しているとき) 0 (そうでないとき)
・接続行列の考え方:mij = 1 (頂点 vi と辺 ej が接続しているとき) 0 (そうでないとき)
16
■ グラフの行列表示■隣接行列と接続行列問い:1 .下記の図のグラフの次数列2 .下記の図のグラフに対する隣接行列 A 及び接続行列 M
解答: 1 .次数列は (3, 3, 3, 3).2 .
17
v1 v2 v3 v4v1 v2 v3 v4
v4
e1e
e
e
e
e
e1 e2 e3 e4 e5 e6
v1 v2 v3 v4
■スモールワールドネットワーク■スモールワールドネットワークとは、「ネットワークにお
ける平均経路長が短く、クラスター係数が高い」状態にあるもの。
・ダンカン・ワッツらが提唱していますが、一見、全然つながっていない人同士であっても、大体5人を介すると必ずつながっているという理論。
・情報は、1人ずつ、1人ずつというように、伝えていかないと伝わらないと思えるが、1人の人に入れば、情報がワープしていき、ワープしていくことによってどんどん情報が伝わっていきます。それがスモールワールドネットワークということです。
・友達の友達… 5人介すと、皆つながるという説もある。18
D3.js の描画■D3.js とは・数値データに基づいて HTMLドキュメントを動的に構築するため
の Javascript のオープンソースのライブラリのこと。・おもに、 HTML や CSS だけでなく、 SVG を用いる。・数値データの内容によって、 HTMLドキュメントの中の DOMオブジェクトとデータを関連付け、数値データの大小にしたがって、 HTML や SVG 要素の挿入または削除、さらに各属性の変更を行う API をさす。
■D3.js の特徴・おもに 8 つのコンポーネントから成り立っている。1 . Core コンポーネント、 2 . Scale コンポーネント、 3 . SVG
コンポーネント、 4 . Time コンポーネント、 5 . Layouts コンポーネント、 6 . Geography コンポーネント、 7 . Geometryコンポーネント、 8 . Behavior コンポーネント
19
この辺で、次回に持ち越ししたい
と思います。
やっぱ、 js は最高だね!
次回以降の予定■D3.js のチュートリアル■D3.js の内容:・ Foursquare API を用いてデータ取得→ D3.js でグラフや地
図上に可視化。
・政府などの公的データ( .csv )→ D3.js → 可視化
・ SNS のデータの取得→ R で相関分析→ D3.js で可視化(描画)
“Social Data Visualization with HTML5 and JavaScript” Simon Timms, 2013, Packt Publishing
“Pro Data Visualization using R and JavaScript” 2013, Tom Barker, Apress
20
参考文献・ URL一覧■As for Data Visualization it was refered to the following books and URLs: • “Getting Started with D3” 2012, Mike Dewar, O’Reilly Media http://it-ebooks.info/read/835/ →ニューヨーク交通公社のデータを用いた実践的な内容で、 Layouts component を中心にして
いる。日本語版もあるが、下記 URL からフリーでダウンロードできる。ちなみに、ナポレオン進軍のフローチャートはここで例示されて紹介されている。
• “Interactive Data Visualization for the Web” 2013, Scott Murray, O’Reilly Media http://chimera.labs.oreilly.com/books/1230000000345
→ D3.js に必要な知識をピックアップし、 SVG から Bar Charts 、地図上での描画まで丁寧に解説されている。 Paper book での販売もあるが On line 上での閲覧もできる。
■As for Graph Theory it was refered to the following books and URLs:• 「やさしいグラフ理論入門」 2013 小林みどり著 牧野書店 →数学の 1 分野であるグラフ理論を、定理と証明、命題を使いながらも、とてもわかりやす
く解説した内容になっている。他の多々ある翻訳本よりも、理解しやすい。• 「 WEB + De Press Vol.76 実践 UI デザイン」 2013 →D3.js及びグラフ理論と SQL が参考になる。
• ■次回参照予定• “Social Data Visualization with HTML5 and JavaScript” Simon Timms, 2013, Packt Publishing http://www.packtpub.com/social-data-visualization-with-html5-and-javascript/book • “Pro Data Visualization using R and JavaScript” 2013, Tom Barker, Apress http://it-ebooks.info/book/2676/ 21