Recommended
More Related Content
Viewers also liked
Viewers also liked (19)
More from 博三 太田
More from 博三 太田 (20)
Jscafe lt 4th_d3.js_20131110_ota
- 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. 自己紹介 ■Background （もともとの専門分野） 廃棄物工学：「産業廃棄物の不法投棄の実証分析」 ・理論：ゲーム理論（情報の非対称性やプリンシパル・エージェント理論） ・実践：計量経済学（時系列分析） →ごみ処理事業者と委託者（市民）と警察とをプレイヤ―として、体系立てて、 ごみの移動量のデータを用いて、地図上でどの県が不法投棄しやすいか などを証明したもの。 ↓ ■現在の専門分野： ・売上等のデータを見て、どのような分析手法が当てはまるかを考え、売上 予測や顧客をセグメントに分けてDMを打つなどの提案業務、 ・サイトの改修事例から、業界ごとの傾向などを見出し、体系化や分類をし て、パッケージ化すること。 Cf. 部分の最適化と全体の最適化。 ↓ データ解析に、まずは数値データをグラフにするなどの可視化が必須、D3.js に着目しました。 Cf. 発表等： http://www.slideshare.net/otanet/ 2
- 3. 今回のLTの背景 1．統計解析やデータマイニングのソフトウェア SPSS, SAS, Rを使っていて、解析後のグラフがきれいでない！ モデル構築に集中したい、グラフの作成をやり直すのはした くない。 2．上記のツールのユーザを悩ます共通の課題がきれいな可視 化になっている。 3．そこで、D3.jsに着目しました！ 4．「SPSS, SAS, RにD3.jsを組み合わせて、アウトプットまで自動 化できないか！」と考え、D3.jsを調べてみました。 3
- 8. ■グラフの定義や表記法とその構造 ■グラフの定義： ・グラフとは、いくつかの点と点を結ぶ線で構成される図のこと。 A F E B C D ⇒上記の図は、点が6個（A, B, C, D, E, F）で、線が9本からなる グラフであるといえる。 ※1. 線は曲線でもかまわない。長さや形状は問題にしない。線はただ、 その2点が結ばれているということのみを示すために書かれている。 ※2. 「やさしいグラフ理論入門」小林（2013）より引用。 8
- 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. ■グラフの定義や表記法とその構造 ■グラフの表記（その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. ■グラフの用語 ■隣接と接続 グラフGにおいて、下記の図のように、頂点v1, v2が辺e1で結ば れているとき、e1 = {v1, v2}であるとき、頂点v1, v2をeの端点 という。 またこの時、 v1と v2は隣接(adjacent)しているという。 さらに、 頂点v1と辺e1は接続(incident)しているという。 v1 v2 e1 11
- 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
- 15. ■グラフの行列表示 ■隣接行列と接続行列 定義： ・隣接行列(adjacency matrix) : 点i と点j を結ぶ辺の本数を第ij 要素とするn × n の行列のこと。 • 接続行列(incidence matrix) : 点i が辺j に接続している場合, 第ij 要素が1 であり, 接続していない場合0 であるようなn × m の行列のこと。 15
- 16. ■グラフの行列表示 ■隣接行列と接続行列 問い 1．下記の図のグラフの次数列を考えてみよう。 2．下記の図のグラフに対して隣接行列Aと接続行列Mを考えて みよう。 ・隣接行列の考え方： aij = 1（頂点vi と頂点uj が隣接しているとき） 0（そうでないとき） ・接続行列の考え方： mij = 1（頂点vi と辺ej が接続しているとき） 0（そうでないとき） 16
- 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
- 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. 参考文献・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