Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Jscafe lt 4th_d3.js_20131110_ota

1.183 visualizaciones

Publicado el

グラフ理論

Publicado en: Diseño
  • Sé el primero en comentar

Jscafe lt 4th_d3.js_20131110_ota

  1. 1. LT 3rd Trial Graph Theory for Data Visualization with D3.js jsCafe vol.16 2013/11/10 At WAVE : Web Design & Programming School Twitter ID:@otanet Hiromitsu OTA
  2. 2. 自己紹介 ■Background (もともとの専門分野) 廃棄物工学:「産業廃棄物の不法投棄の実証分析」 ・理論:ゲーム理論(情報の非対称性やプリンシパル・エージェント理論) ・実践:計量経済学(時系列分析) →ごみ処理事業者と委託者(市民)と警察とをプレイヤ―として、体系立てて、 ごみの移動量のデータを用いて、地図上でどの県が不法投棄しやすいか などを証明したもの。 ↓ ■現在の専門分野: ・売上等のデータを見て、どのような分析手法が当てはまるかを考え、売上 予測や顧客をセグメントに分けてDMを打つなどの提案業務、 ・サイトの改修事例から、業界ごとの傾向などを見出し、体系化や分類をし て、パッケージ化すること。 Cf. 部分の最適化と全体の最適化。 ↓ データ解析に、まずは数値データをグラフにするなどの可視化が必須、D3.js に着目しました。 Cf. 発表等: http://www.slideshare.net/otanet/ 2
  3. 3. 今回のLTの背景 1.統計解析やデータマイニングのソフトウェア SPSS, SAS, Rを使っていて、解析後のグラフがきれいでない! モデル構築に集中したい、グラフの作成をやり直すのはした くない。 2.上記のツールのユーザを悩ます共通の課題がきれいな可視 化になっている。 3.そこで、D3.jsに着目しました! 4.「SPSS, SAS, RにD3.jsを組み合わせて、アウトプットまで自動 化できないか!」と考え、D3.jsを調べてみました。 3
  4. 4. 今回のグラフ理論とD3.jsとの関係(その1) ■本日の発表のメインはグラフ理論です! 心の中の会話(↓): Aさん:これって、D3.jsと関係あるのか! Bさん:いやー、ないっしょ! Cさん:D3.jsのチュートリアルやればいいでしょ! Oさん:でも…ネットワーク図って、毎回、描画すると変わるよね。 Aさん:まあー、確かに。 Bさん:それじゃ、今回のネットワーク分析のアウトプットはどれにするの? Cさん:たしか3000万のPJだろー。なぜそうなるのか、説明できないとマズイよ。 Oさん:たしかにそうだよね。 Aさん:再現性って、やっぱ必要だよね。 Bさん:じゃあ、ネットワーク図って、どうなって生成されてるの? Oさん:それって、何? O(tanet)さん:まずはグラフ理論さ!じゃあ、少し、理解を深めてみよう! 4
  5. 5. 今回のグラフ理論とD3.jsとの関係(その2) ■ネットワーク図の例 ・影響の因果関係の合理性 ・コミュニィティの分類の正確性 5
  6. 6. グラフ理論-しっておきたいこと‐ ■グラフの定義や表記法とその構造 ■グラフの用語 ・ 隣接と接続、次数… ■グラフの種類 ・単純グラフ、完全グラフ、非連結グラフ、重み付きグラフ ■グラフの行列表示 ・隣接行列、接続行列、有効グラフの行列表示、有向グラフの強連結 分解… ■スモールワールドネットワーク ・「世界中の人の中から任意に2人を選んだとき、その2人は何人の知 人を介してつながっているか」 社会心理学者のミルグラムの実験 6
  7. 7. ■グラフの定義や表記法とその構造 ■グラフの構造: ・典型的なグラフの例 ノード b ・ノード=頂点= vertex エッジ ・エッジ=辺=リンク d ・ループ:あるノードから同じノードに 対するエッジのこと c a e ループ 7
  8. 8. ■グラフの定義や表記法とその構造 ■グラフの定義: ・グラフとは、いくつかの点と点を結ぶ線で構成される図のこと。 A F E B C D ⇒上記の図は、点が6個(A, B, C, D, E, F)で、線が9本からなる グラフであるといえる。 ※1. 線は曲線でもかまわない。長さや形状は問題にしない。線はただ、 その2点が結ばれているということのみを示すために書かれている。 ※2. 「やさしいグラフ理論入門」小林(2013)より引用。 8
  9. 9. ■グラフの定義や表記法とその構造 ■グラフの表記(その1): e6 v2 e1 v1 e4 e5 e2 e3 v5 v4 v3 グラフは通常、G = (V, E)とあらわす。 頂点の集合(V)と辺の集合( E)の2つで決まる。 右の図は次のようにあらわせる。 V = {v1, v2, v3, v4, v5}、 E = {e1, e2, e3, e4, e5, e6} 9
  10. 10. ■グラフの定義や表記法とその構造 ■グラフの表記(その2): 辺( e1 )は頂点 v1とv2を結ぶ辺である。 これを下記のように記す。 e1 = {v1, v2} e1 他の辺も同様に、 v1 e2 = {v2, v3}, e6 e4 e5 e3 = {v2, v4}, e4 = {v1, v3}, e3 e5 = {v1, v4}, v5 v4 e6 = {v1, v5} v2 e2 v3 E = {e1, e2, e3, e4, e5, e6}の代わりに、 E = {{v1, v2}, {v1, v4}, {v1, v5 }, {v2, v3}, {v3, v4}, {v4, v5}}とも書ける。 10
  11. 11. ■グラフの用語 ■隣接と接続 グラフGにおいて、下記の図のように、頂点v1, v2が辺e1で結ば れているとき、e1 = {v1, v2}であるとき、頂点v1, v2をeの端点 という。 またこの時、 v1と v2は隣接(adjacent)しているという。 さらに、 頂点v1と辺e1は接続(incident)しているという。 v1 v2 e1 11
  12. 12. ■グラフの用語 ■次数 ・頂点に接続している辺の本数を、その頂点の次数(degree)と いう。 ・問い:下記の図の頂点の次数を求めてみよう。 v1 v5 v2 v4 v3 12
  13. 13. ■グラフの用語 ■次数 ・頂点に接続している辺の本数を、その頂点の次数(degree)と いう。 ・問い:下記の図の頂点の次数を求めてみよう。 ・解答:deg v1 = 3, deg v2 = 3, deg v3 = 0, deg v4 = 2, deg v5 = 2. ※ deg v3 = 0のv3を孤立点という。 v1 v5 v2 v4 v3 13
  14. 14. ■グラフの種類 ■代表的なグラフの種類: 1.(ラベル付き)単純グラフ 2.完全グラフ 3.非連結グラフ、 4.重み付きグラフ 14
  15. 15. ■グラフの行列表示 ■隣接行列と接続行列 定義: ・隣接行列(adjacency matrix) : 点i と点j を結ぶ辺の本数を第ij 要素とするn × n の行列のこと。 • 接続行列(incidence matrix) : 点i が辺j に接続している場合, 第ij 要素が1 であり, 接続していない場合0 であるようなn × m の行列のこと。 15
  16. 16. ■グラフの行列表示 ■隣接行列と接続行列 問い 1.下記の図のグラフの次数列を考えてみよう。 2.下記の図のグラフに対して隣接行列Aと接続行列Mを考えて みよう。 ・隣接行列の考え方: aij = 1(頂点vi と頂点uj が隣接しているとき) 0(そうでないとき) ・接続行列の考え方: mij = 1(頂点vi と辺ej が接続しているとき) 0(そうでないとき) 16
  17. 17. ■グラフの行列表示 ■隣接行列と接続行列 問い: 1.下記の図のグラフの次数列 2.下記の図のグラフに対する 隣接行列A 及び接続行列M e1 e 解答: 1.次数列は(3, 3, 3, 3). 2. v4 e e e e1 e2 e3 e4 e5 e6 v 1 v v 2 v v 3 v v v v1 v2 v3 v4 e 4 1 2 3 4 17
  18. 18. ■スモールワールドネットワーク ■スモールワールドネットワークとは、「ネットワークにおける平 均経路長が短く、クラスター係数が高い」状態にあるもの。 ・ダンカン・ワッツらが提唱していますが、一見、全然つながっ ていない人同士であっても、大体5人を介すると必ずつな がっているという理論。 ・情報は、1人ずつ、1人ずつというように、伝えていかないと伝 わらないと思えるが、1人の人に入れば、情報がワープして いき、ワープしていくことによってどんどん情報が伝わってい きます。それがスモールワールドネットワークということです。 ・友達の友達…5人介すと、皆つながるという説もある。 18
  19. 19. 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
  20. 20. 次回以降の予定 ■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
  21. 21. 参考文献・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

×