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人介すと、皆つながるという説もある。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