Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

合同勉強会 in 大都会岡山 -2015 Winter- LT - 僕とvis.jsと データ解析コンペ

72 views

Published on

2015年12月5日の合同勉強会 in 大都会岡山 -2015 Winter- LT で発表したスライドです。
題は「 僕とvis.jsと データ解析コンペ 」です。
訳あって再アップロードします。
slideshareってスライドの差し替えできなくなったんですね。

Published in: Data & Analytics
  • Be the first to comment

  • Be the first to like this

合同勉強会 in 大都会岡山 -2015 Winter- LT - 僕とvis.jsと データ解析コンペ

  1. 1. 僕とvis.jsと データ解析コンペ  2015/12/05 LT 合同勉強会 in ⼤都会岡⼭ -2015 Winter- 岡⼭理科⼤学 総合情報学部情報科学科 3年⽣ 井上 佳祐(@fire_fire_2)
  2. 2. ⾃⼰紹介 • 井上 佳祐(Keisuke Inoue) • 理⼤ 情報科学科 3年⽣ • Twitter
 @keisuke_oni Follow me!!! • SNS
 - Twitter
 - Facebook
 - Google+ etc. . .
  3. 3. vis.jsとは? • A dynamic, browser based visualization library. The library is designed to be easy to use, to handle large amounts of dynamic data, and to enable manipulation of and interaction with the data.
 -公式サイトより引⽤
  http://visjs.org
  4. 4. つまりこれを使ってデータの可視化が簡単にできる
 JavaScriptライブラリ
 ↓こんなかんじに↓ ネットワーク図 タイムライン 2次元グラフ 3次元グラフ
  5. 5. これでやりたいこと • データ解析コンペで提供された⼤規模データ
 つまりビックデータの可視化
  6. 6. データ解析コンペについて • 東京都板橋区役所の受付案内システムのログデー タの解析 • データ解析により
 - よりよいサービスのために、お客様のニーズを 正確に判断したい
 - ニーズに対して効率てきに業務を遂⾏したい
 - 役所の⼈が気づいてない課題を知りたい
  7. 7. なぜ板橋区なのか? • 連携機能を備えた受付案内システムを先駆けて 導⼊しているため
  8. 8. • 複数の窓⼝を周る場合 • 従来であれば違う窓⼝ごとに違う番号札を取って並ぶ必要 がある
 →わかりづらくて、⼿間もかかり、待ち時間も⻑い。 • 板橋区役所では番号札を発券後、最初の窓⼝での⽤事がす んだら次に⽤事のある窓⼝へ連携処理をしてくれ、窓⼝を 回る順番が書かれた案内書を渡される。次の窓⼝での待ち は発券時間順+αの順で呼ばれる
 →周る順番も書いていて分かりやすく、なにより待ち時間 が短い。(らしい。⾏ったことない。)
  9. 9. じゃあ、
 ⼈々の窓⼝の動きをネットワー ク図で可視化させてみよう!
  10. 10. という流れで
 vis.jsでネットワーク図を作って みることにしました
  11. 11. ネットワーク図を作るにあたって ノード エッジ
  12. 12. ノードとエッジの表し⽅ var nodes = new vis.DataSet([ {id: 1, label: 'Node 1'}, {id: 2, label: 'Node 2'}, {id: 3, label: 'Node 3'}, {id: 4, label: 'Node 4'}, {id: 5, label: 'Node 5'}, {id: 6, label: 'Node 6'}, {id: 7, label: 'Node 7'}, {id: 8, label: 'Node 8'} ]); var edges = new vis.DataSet([ {from: 1, to: 8, arrows:'to', dashes:true}, {from: 1, to: 3, arrows:'to'}, {from: 1, to: 2, arrows:'to, from'}, {from: 2, to: 4, arrows:'to, middle'}, {from: 2, to: 5, arrows:'to, middle, from'}, {from: 5, to: 6, arrows:{to: {scaleFactor:2}}}, {from: 6, to: 7, arrows: {middle:{scaleFactor: 0.5},from:true}} ]);
  13. 13. <script type="text/javascript"> // create an array with nodes var nodes = new vis.DataSet([ {id: 1, label: 'Node 1'}, {id: 2, label: 'Node 2'}, {id: 3, label: 'Node 3'}, {id: 4, label: 'Node 4'}, {id: 5, label: 'Node 5'}, {id: 6, label: 'Node 6'}, {id: 7, label: 'Node 7'}, {id: 8, label: 'Node 8'} ]); // create an array with edges var edges = new vis.DataSet([ {from: 1, to: 8, arrows:'to', dashes:true}, {from: 1, to: 3, arrows:'to'}, {from: 1, to: 2, arrows:'to, from'}, {from: 2, to: 4, arrows:'to, middle'}, {from: 2, to: 5, arrows:'to, middle, from'}, {from: 5, to: 6, arrows:{to:{scaleFactor:2}}}, {from: 6, to: 7, arrows:{middle:{scaleFactor:0.5},from:true}} ]); // create a network var container 
 = document.getElementById('mynetwork'); var data = { nodes: nodes, edges: edges }; var options = {}; var network = new vis.Network(container, data, options); </script>
  14. 14. 実データで可視化してみる • 作ってみたいネットワーク図
 - 発券機から窓⼝、窓⼝から窓⼝の⼈々の移動を それぞれの間の移動⼈数に応じてエッジの太さ を変える

  15. 15. データの加⼯ • ⽇付や窓⼝IDや業務IDや連携有無のパラメータなどい ろいろがつまったログデータ
 (実データはNDA的にまずいのでみせれない) • ⼀⾏ずつ登録されており、連携でおこなった窓⼝業務 のログには連携有りのパラメータがある • このデータを元にまず重複有りで
 {移動元窓⼝ID:?, 移動先窓⼝ID:?},. . . 
 という重複有りのデータを作った
  16. 16. • {移動元窓⼝ID:? 移動先窓⼝ID:?},. . . 
 という重複有りのデータから同じ移動の⼈数をカウン ト
 
 {移動元窓⼝ID:?, 移動先窓⼝ID:?, ⼈数:?},. . . 
 という重複なしデータをつくった
 
 →vis.js のデータセットの形式
 {from:移動元, to:移動先, arrows:to, width:エッジの 太さ}
 に合うようにするため
  17. 17. • これをJSONとして読み込む
 JavaScriptでエッジを追加するメソッドを実⾏ して、
 再描写させればできあがり for (var i = 0; i < dataLen; i++) { var log2Value = Math.LOG2E * Math.log(myData[i].value); edges.add([ {from: myData[i].from, to: myData[i].to, arrows:'to', width: log2Value} ]); }; network.redraw(); ※myDataが読み込んだJSON ※log2valueのエッジの太さは⼈数のlog2を取った値
  18. 18. とりあえず1⽇分で描画
  19. 19. 今後の課題 • ⾒にくいから設定の調整 • 時間変化による移動のシミュレーション
 (だんだんとノードがエッジによってつながっ ていく感じのアニメーション)
  20. 20. ご清聴
 ありがとうございました

×