Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Ruby  /  R  /  HTML5を⽤用いた
データ解析・データビジュアライゼーション
2015年年4⽉月16⽇日
株式会社博報堂DYメディアパートナーズ
データドリブンメディアマーケティングセンター
兼
メディアビジネス開発センター
篠...
R
HiveQL
Python	
  /	
  Ruby
Processing	
  /	
  three.js	
  /	
  tableau
統  計
デ  ー  タ  集  計
デ  ー  タ  収  集
デ  ー  タ  可  視  化...
p	
  r	
  i	
  v	
  a	
  t	
  e	
  .	
  1
LINEの履履歴の可視化
3(C) HAKUHODO DY MEDIA PARTNERS 2015
p	
  r	
  i	
  v	
  a	
  t	
  e	
  .	
  2
amazonの購⼊入履履歴を可視化
4(C) HAKUHODO DY MEDIA PARTNERS 2015
5(C) HAKUHODO DY MEDIA PARTNERS 2015
広告会社でプログラミング?
プログラミングが主に必要な部署
※その他、必要に応じて
クリエイティブ
メディアプランニング
ダイレクトマーケティング
研究開発
メディア開発...
(C) HAKUHODO DY MEDIA PARTNERS 2015 6
本資料料のカバー範囲
データ
収集
前処理理
データ
解析 モデリング 可視化
ただし、
アクセス解析、
広告反応データ、
の話ではありません。
ただし、
Tablea...
(C) HAKUHODO DY MEDIA PARTNERS 2015 7
本題に⼊入る前に…
データ
収集
前処理理
データ
解析
モデリング 可視化
データ
解析の
必要性
なぜデータ解析が必要なのか
(C) HAKUHODO DY MEDIA PARTNERS 2015 8
神取  道宏  (2014)  『ミクロ経済学の⼒力力』⽇日本評論論社
“⼤大きな⾒見見落落としや、
論論理理の⽳穴がないかをチェックする
...
Case.1
データ収集『⼝口コミデータを収集する』
9(C) HAKUHODO DY MEDIA PARTNERS 2015
Case.1
データ収集『⼝口コミデータを収集する』
10(C) HAKUHODO DY MEDIA PARTNERS 2015
⼝口コミなどのソーシャル情報は、各種ツールで(⼀一部)収集することも
できますが、分析⼿手法に合わせて、柔軟に⾃自...
Case.1
データ収集『⼝口コミデータを収集する』
11(C) HAKUHODO DY MEDIA PARTNERS 2015
たとえば、対象サイトから、ある⾔言葉葉を含むページのみの
URL⼀一覧を取得し、アクセス解析ツールで分析したい。
...
Case.1
データ収集『⼝口コミデータを収集する』
12(C) HAKUHODO DY MEDIA PARTNERS 2015
たとえば、対象サイトの⼝口コミから、ある⾔言葉葉と同時に書き込まれる
ワード(共起語)を時系列列で分析したい。
ク...
Case.1
データ収集『⼝口コミデータを収集する』
13(C) HAKUHODO DY MEDIA PARTNERS 2015
anemoneのインストール
必要なパッケージをロード(適宜)
# -*- coding:utf-8 -*-
re...
Case.1
データ収集『⼝口コミデータを収集する』
14(C) HAKUHODO DY MEDIA PARTNERS 2015
対象となるURLを設定し、再帰呼び出し(階層指定可)
ループ対象となるページを絞りたい場合は
上記ループ中で、正規...
Case.1
データ収集『⼝口コミデータを収集する』
15
(C) HAKUHODO DY MEDIA PARTNERS 2015
あとは、ブログの抜き出したい箇所に応じて、
正規表現で抜き出すか、あるいはdiv要素であればnokogiriで処...
Case.1
データ収集『⼝口コミデータを収集する』
16(C) HAKUHODO DY MEDIA PARTNERS 2015
あとは、ブログの抜き出したい箇所に応じて、
正規表現で抜き出すか、あるいはdiv要素であればnokogiriで処理...
Case.1
データ収集『⼝口コミデータを収集する』
17(C) HAKUHODO DY MEDIA PARTNERS 2015
Case.1
データ収集『⼝口コミデータを収集する』
18(C) HAKUHODO DY MEDIA PARTNERS 2015
補⾜足1:抽出したい要素がうまくdiv要素で指定できないとき
→特定の⽂文字列列で正規表現で抽出
date = p...
Case.2
データ収集『⼼心拍数データを収集する』
19(C) HAKUHODO DY MEDIA PARTNERS 2015
Case.2
データ収集『⼼心拍数データを収集する』
20(C) HAKUHODO DY MEDIA PARTNERS 2015
近年年、arduinoなどで使⽤用できる⼼心拍数センサが安価で⼿手に⼊入るが
特別な装置を使わずウェブカメラ経由で...
Case.2
データ収集『⼼心拍数データを収集する』
21(C) HAKUHODO DY MEDIA PARTNERS 2015
⼼心拍数は、指などの映像から得られる
“指の先端の⾎血中の酸素濃度度の変化”から推測可能
指の先端の⾎血中の酸素濃...
Case.2
データ収集『⼼心拍数データを収集する』
22(C) HAKUHODO DY MEDIA PARTNERS 2015
WebRTCは、W3Cによって標準化されている
ブラウザでリアルタイムなコミュニケーションを
可能にするAPI
要...
Case.2
データ収集『⼼心拍数データを収集する』
23(C) HAKUHODO DY MEDIA PARTNERS 2015
まずはWebRTCからの映像取得
(1)  ユーザにカメラやマイクなどのメディアデバイス使⽤用許可を尋ねる。
(2...
Case.2
データ収集『⼼心拍数データを収集する』
24(C) HAKUHODO DY MEDIA PARTNERS 2015
得られた映像から⾚赤⾊色チャンネルの明度度を計算
(1)  映像のフレームごとにcanvasに静⽌止画書き出し
(...
Case.2
データ収集『⼼心拍数データを収集する』
25(C) HAKUHODO DY MEDIA PARTNERS 2015
得られた映像から⾚赤⾊色チャンネルの明度度を計算
function getRedChannel(){ reques...
Case.2
データ収集『⼼心拍数データを収集する』
26(C) HAKUHODO DY MEDIA PARTNERS 2015
Case. 3
データ可視化『Jリーグ』
27(C) HAKUHODO DY MEDIA PARTNERS 2015
28(C) HAKUHODO DY MEDIA PARTNERS 2015
Case.3
データ可視化『Jリーグ』
データスタジアム社のデータ提供協⼒力力のもと、
2013年年度度のJ1リーグの全選⼿手のプレイデータを解析・可視化。
プレイの特...
Case.3
データ可視化『Jリーグ』
今回使⽤用したデータスタジアム社のデータ
どの選⼿手が、どれくらいドリブルしたか、
どんなシュートを打って、何本枠内に⾶飛んだか、
空中戦には、どれくらい競り勝ったか、
パスは、どちらの⽅方向にどれくらい...
30(C) HAKUHODO DY MEDIA PARTNERS 2015
Case.3
データ可視化『Jリーグ』
やりたかったこと
プレイデータから全選⼿手をグルーピングするとともに、
プレイ特徴と、プレイ以外の様々なオープンデータの関係を可...
31(C) HAKUHODO DY MEDIA PARTNERS 2015
Case.3
データ可視化『Jリーグ』
⾃自⼰己組織化マップ
多次元の情報をもとに、前情報無しに、類似しているものを
⾃自動的に近くにマッピングしていく⼿手法
(1) ...
32(C) HAKUHODO DY MEDIA PARTNERS 2015
Case.3
データ可視化『Jリーグ』
⾃自⼰己組織化マップ
多次元の情報をもとに、前情報無しに、類似しているものを
近くにマッピングしていく⼿手法
(2)  各ユニッ...
33(C) HAKUHODO DY MEDIA PARTNERS 2015
Case.3
データ可視化『Jリーグ』
⾃自⼰己組織化マップ
多次元の情報をもとに、前情報無しに、類似しているものを
近くにマッピングしていく⼿手法
(3)  各⼊入⼒...
34(C) HAKUHODO DY MEDIA PARTNERS 2015
Case.3
データ可視化『Jリーグ』
⾃自⼰己組織化マップ
多次元の情報をもとに、前情報無しに、類似しているものを
近くにマッピングしていく⼿手法
(4)  マッピン...
35(C) HAKUHODO DY MEDIA PARTNERS 2015
Case.3
データ可視化『Jリーグ』
⾃自⼰己組織化マップ
多次元の情報をもとに、前情報無しに、類似しているものを
近くにマッピングしていく⼿手法
(5)  同様の作...
36(C) HAKUHODO DY MEDIA PARTNERS 2015
Case.3
データ可視化『Jリーグ』
⾃自⼰己組織化マップ
多次元の情報をもとに、前情報無しに、類似しているものを
近くにマッピングしていく⼿手法
(6)  全ての⼊...
37(C) HAKUHODO DY MEDIA PARTNERS 2015
Case.3
データ可視化『Jリーグ』
⾃自⼰己組織化マップ:追記
ランダムに毎回結果(位置)が変わるため、関係のみに意味がある。
さまざまな解釈ができる柔軟性が魅⼒力...
38(C) HAKUHODO DY MEDIA PARTNERS 2015
Case.3
データ可視化『Jリーグ』
⾃自⼰己組織化マップのRでの実装⽅方法
ライブラリ、データ読み込み
library(som)
jdata<-read.csv(“...
39(C) HAKUHODO DY MEDIA PARTNERS 2015
Case.3
データ可視化『Jリーグ』
実際の結果
40(C) HAKUHODO DY MEDIA PARTNERS 2015
Case.3
データ可視化『Jリーグ』
実際の結果
FWは近くにマッピングされているが、
その中でもプレイ特徴でさらに分離離
前⽥田と
ズラタンが
近い
川⼜又と
豊⽥...
41(C) HAKUHODO DY MEDIA PARTNERS 2015
Case.3
データ可視化『Jリーグ』
Three.js
WebGL、canvas、svg、CSS3Dをサポートしたブラウザ⽤用の
3D描画ライブラリ。javascri...
42(C) HAKUHODO DY MEDIA PARTNERS 2015
Case.3
データ可視化『Jリーグ』
⾃自⼰己組織化マップの結果をThree.jsへ変換
⾃自⼰己組織化マップの各データのユニット位置結果をcsv出⼒力力
asom$...
43(C) HAKUHODO DY MEDIA PARTNERS 2015
Case.3
データ可視化『Jリーグ』
⾃自⼰己組織化マップの結果をThree.jsへ変換
three.js前準備
var SCREEN_WIDTH=1500;
var...
44(C) HAKUHODO DY MEDIA PARTNERS 2015
Case.3
データ可視化『Jリーグ』
⾃自⼰己組織化マップの結果をThree.jsへ変換
three.js  ※実際にはcsvファイルを⾃自動で変換
var memb...
45(C) HAKUHODO DY MEDIA PARTNERS 2015
Case.3
データ可視化『Jリーグ』
demo.
Case. 4
データ可視化『神⼾戸市観光』
46(C) HAKUHODO DY MEDIA PARTNERS 2015
47(C) HAKUHODO DY MEDIA PARTNERS 2015
Case. 4
データ可視化『神⼾戸市観光』
神⼾戸市観光客増加のため、潜在層のウェブ⾏行行動・移動履履歴データを分析。
それらをデータフュージョンし、クラスタごとの神...
48(C) HAKUHODO DY MEDIA PARTNERS 2015
Case. 4
データ可視化『神⼾戸市観光』
DMPとは、データマーケティングのためのデータを
オンライン上のCookieで格納する箱
DMP
(Data  Manag...
49(C) HAKUHODO DY MEDIA PARTNERS 2015
Case. 4
データ可視化『神⼾戸市観光』
神⼾戸市様が保有する観光サイト閲覧者が、
デモグラごとに普段どのような検索索をしているか、
どのようなサイトを閲覧している...
50(C) HAKUHODO DY MEDIA PARTNERS 2015
Case. 4
データ可視化『神⼾戸市観光』
神⼾戸市様が保有する観光サイト閲覧者が、
デモグラごとに普段どのような検索索をしているか、
どのようなサイトを閲覧している...
51(C) HAKUHODO DY MEDIA PARTNERS 2015
Case. 4
データ可視化『神⼾戸市観光』
MITメディアラボで開発された、ビジュアルデザインのためのJAVAベースの
プログラミング⾔言語  (wikiより)
Pr...
52(C) HAKUHODO DY MEDIA PARTNERS 2015
Case. 4
データ可視化『神⼾戸市観光』
DMP+移動履履歴データをProcessingで可視化
Arima	
  
Rokko	
  
Kobe_port	
  ...
53(C) HAKUHODO DY MEDIA PARTNERS 2015
Case. 4
データ可視化『神⼾戸市観光』
DMP+移動履履歴データをProcessingで可視化
class Tourist{
//現在地(移動中の各時点ごとの)
...
54(C) HAKUHODO DY MEDIA PARTNERS 2015
Case. 4
データ可視化『神⼾戸市観光』
DMP+移動履履歴データをProcessingで可視化
class Tourist{
//続き
void drawtour...
55(C) HAKUHODO DY MEDIA PARTNERS 2015
Case. 4
データ可視化『神⼾戸市観光』
demo.
Case. 5
データ可視化『Darvish』
56(C) HAKUHODO DY MEDIA PARTNERS 2015
57(C) HAKUHODO DY MEDIA PARTNERS 2015
Case. 5
データ可視化『Darvish』
データスタジアム社のデータ提供協⼒力力のもと、
Darvishが2013年年に投げたボールの全データを可視化&サウンド化...
58(C) HAKUHODO DY MEDIA PARTNERS 2015
Case. 5
データ可視化『Darvish』
ダルビッシュが2013年年に投げた1年年間の
球種、球速、結果のデータ
59(C) HAKUHODO DY MEDIA PARTNERS 2015
Case. 5
データ可視化『Darvish』
さらに、球種ごとの、
縦揺れ、横揺れのデータ
60(C) HAKUHODO DY MEDIA PARTNERS 2015
Case. 5
データ可視化『Darvish』
“速度度”を周波数(⾳音の⾼高さ)、
“球種”を⾳音波(⾳音の種類)にマッピング
⾳音テーブル 球速  to  周波数変換
61(C) HAKUHODO DY MEDIA PARTNERS 2015
Case. 5
データ可視化『Darvish』
Web  Audio  API
HTML5による、動的に⾳音を⽣生成・処理理するためのJavascript  API。
...
62(C) HAKUHODO DY MEDIA PARTNERS 2015
Case. 5
データ可視化『Darvish』
Web  Audio  API
var eg = audioctx.createGain();
var osc = au...
63(C) HAKUHODO DY MEDIA PARTNERS 2015
demo.
Case. 5
データ可視化『Darvish』
Case. 6
データ可視化『⽣生活定点』
64(C) HAKUHODO DY MEDIA PARTNERS 2015
65(C) HAKUHODO DY MEDIA PARTNERS 2015
Case.6
データ可視化『⽣生活定点』
博報堂⽣生活総合研究所が2年年おきに実施している”⽣生活定点”
過去20年年間の⽣生活定点を様々なデータと掛け合わせて可視化
...
66(C) HAKUHODO DY MEDIA PARTNERS 2015
Case.6
データ可視化『⽣生活定点』
seikatsusoken.jp/teiten2014/
67(C) HAKUHODO DY MEDIA PARTNERS 2015
Case.6
データ可視化『⽣生活定点』
68(C) HAKUHODO DY MEDIA PARTNERS 2015
⽣生活定点データの⾯面⽩白さは、
“過去20年年間の時系列列データ”と”似てるかもグラフ”
1998	
   2000	
   2002	
   2004	
   20...
69(C) HAKUHODO DY MEDIA PARTNERS 2015
DMPは“今現在の⼈人々の詳細を把握できる”データ
普段の検索索、Q&A、SNS
具体的には、どんなことが気になっているのか
普段の閲覧サイト
その⼈人は普段、どのよう...
70(C) HAKUHODO DY MEDIA PARTNERS 2015
⽣生活定点データにDMPデータを掛け合わせて
分析・ビジュアライズ
?
?
?
1998	
  2000	
  2002	
  2004	
  2006	
  2008...
71(C) HAKUHODO DY MEDIA PARTNERS 2015
?
?
?
1998	
  2000	
  2002	
  2004	
  2006	
  2008	
  2010	
  
Case.6
データ可視化『⽣生活定点』
...
72(C) HAKUHODO DY MEDIA PARTNERS 2015
Case.2 : KAO
アソシエーション分析
形態素解析
Case.6
データ可視化『⽣生活定点』
辞書や⽂文法ルールなどを⽤用いて、対象⽂文章を、
形態素(意味をも...
73(C) HAKUHODO DY MEDIA PARTNERS 2015
Case.2 : KAO
アソシエーション分析
Rによる形態素解析”RMeCab”
Case.6
データ可視化『⽣生活定点』
オープンソース形態素解析エンジンのMeCa...
74(C) HAKUHODO DY MEDIA PARTNERS 2015
Case.6
データ可視化『⽣生活定点』
形態素解析の結果
バイグラム
科学 技術
クローン ⼈人間
技術 開発
巨⼤大 化
遺伝⼦子 操作
プラス マイナス
技術 モ...
75(C) HAKUHODO DY MEDIA PARTNERS 2015
Case.6
データ可視化『⽣生活定点』
形態素解析からワードをマッピング
ネットワークグラフデータに変換
※そのままやるとごちゃごちゃするので頻度度で制限かけるとよい...
76(C) HAKUHODO DY MEDIA PARTNERS 2015
Case.2 : KAO
アソシエーション分析
下記3指標から、”良良い組み合わせルール”を算出
⽀支持度度(Support)
信頼度度(Confidence)
リフト値...
77(C) HAKUHODO DY MEDIA PARTNERS 2015
	
  lhs	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	...
78(C) HAKUHODO DY MEDIA PARTNERS 2015
Case.6
データ可視化『⽣生活定点』
Rでのアソシエーション分析
d.mx<-as.matrix(d)
d.tran<-as(d.mx,”transactions”...
79(C) HAKUHODO DY MEDIA PARTNERS 2015
Case.6
データ可視化『⽣生活定点』
アソシエーション分析からサイトをマッピング
Q&A
(例例)「科学技術の進歩が不不安」
リフト値が⼤大きいものを
中⼼心から近...
80(C) HAKUHODO DY MEDIA PARTNERS 2015
demo.
Case.6
データ可視化『⽣生活定点』
Case. 7
データ可視化『Takumi』
81(C) HAKUHODO DY MEDIA PARTNERS 2015
82(C) HAKUHODO DY MEDIA PARTNERS 2015
Case. 7
データ可視化『Takumi』
⽯石⽥田拓拓⼰己のSNS上の発⾔言履履歴を⽤用いた
形態素解析および機械学習によるデータビジュアライズ
Ruby  “no...
83(C) HAKUHODO DY MEDIA PARTNERS 2015
Case. 7
データ可視化『Takumi』
これまで仕事で多忙だった拓拓⼰己くん。
これからは早く帰って家族の時間を確保してほしい。
背景
84(C) HAKUHODO DY MEDIA PARTNERS 2015
Case. 7
データ可視化『Takumi』
⼀一⽅方で、これから誰を、
業務&飲みに誘えば良良いのか。
背景
85(C) HAKUHODO DY MEDIA PARTNERS 2015
Case. 7
データ可視化『Takumi』
早く帰って欲しいが、帰って欲しくない。
従来、このような問題は、
組織やコミュニケーション上の問題と
誤解されていた。
背景
86(C) HAKUHODO DY MEDIA PARTNERS 2015
Case. 7
データ可視化『Takumi』
しかし我々は博報堂”Data  Wings”
今回もデータで課題を解決したいと思います。
背景
87(C) HAKUHODO DY MEDIA PARTNERS 2015
拓拓⼰己くんのSNS・メール上の発⾔言履履歴を収集
Data
Modeling
Face
book
blog Mail
Case. 7
データ可視化『Takumi』
88(C) HAKUHODO DY MEDIA PARTNERS 2015
Case. 7
データ可視化『Takumi』
形態素解析
89(C) HAKUHODO DY MEDIA PARTNERS 2015
Case. 7
データ可視化『Takumi』
形態素解析
90(C) HAKUHODO DY MEDIA PARTNERS 2015
Case. 7
データ可視化『Takumi』
"拓拓⼰己君が⾔言いそうなこと"を
機械学習でモデリング
拓拓⼰己君には早く帰っていただきつつ、
我々は彼のシミュレーター...
91(C) HAKUHODO DY MEDIA PARTNERS 2015
Case. 7
データ可視化『Takumi』
構成
形態素
解析
Face
book
blog Mail
Three
.js
Web	
  Audio	
  API
92(C) HAKUHODO DY MEDIA PARTNERS 2015
demo.
Case. 7
データ可視化『Takumi』
(C) HAKUHODO DY MEDIA PARTNERS 2015 93
データの分析、
あるいは、そもそものデータ⾃自体、
主観的な要素を含む
(C) HAKUHODO DY MEDIA PARTNERS 2015 94
様々な⽴立立場の⽅方の、
それぞれのデータの向き合いによる
多層的な理理解・解釈が重要だと思います。
(C) HAKUHODO DY MEDIA PARTNERS 2015 95
データビジュアライズのメリット
探索索的なデータ分析を促す
データを⾒見見るのも嫌な⼈人に、
データの持つ⾯面⽩白味を伝える
データリテラシーに関わらず、
対等な⽴立...
(C) HAKUHODO DY MEDIA PARTNERS 2015 96
どういうデータを使って
どういう前処理理をして
どういう世界の構造を仮定するのか
⾃自分がどういうストーリー、メタファーで
現象をあらわしたいか
データ分析はエモーシ...
(C) HAKUHODO DY MEDIA PARTNERS 2015 97
  以上。
ありがとうございました。
HIROYUKI.SHINODA@hakuhodody-­‐media.co.jp
@mirandora_com
www.mir...
参考⽂文献
98(C) HAKUHODO DY MEDIA PARTNERS 2015
るびきち  (著),  佐々⽊木  拓拓郎郎    (著)  (2014)『Rubyによるクローラー開発技法』、SBクリエイティブ
Sau  Sheong ...
Nächste SlideShare
Wird geladen in …5
×

データサイエンティスト協会 木曜勉強会#07『Ruby、R、HTML5を用いたデータ解析・データビジュアライゼーション』

データサイエンティスト協会では、分析・データサイエンスの実務に携わる方を対象に、スキルアップとコミュニケーションの場の創出を目的として不定期で勉強会を行っています。
今回は、『Ruby、R、HTML5を用いたデータ解析・データビジュアライゼーション』をテーマに開催いたします。

  • Als Erste(r) kommentieren

データサイエンティスト協会 木曜勉強会#07『Ruby、R、HTML5を用いたデータ解析・データビジュアライゼーション』

  1. 1. Ruby  /  R  /  HTML5を⽤用いた データ解析・データビジュアライゼーション 2015年年4⽉月16⽇日 株式会社博報堂DYメディアパートナーズ データドリブンメディアマーケティングセンター 兼 メディアビジネス開発センター 篠⽥田  裕之 データサイエンティスト協会  ⽊木曜勉強会 (C) HAKUHODO DY MEDIA PARTNERS 2015 1
  2. 2. R HiveQL Python  /  Ruby Processing  /  three.js  /  tableau 統  計 デ  ー  タ  集  計 デ  ー  タ  収  集 デ  ー  タ  可  視  化 2(C) HAKUHODO DY MEDIA PARTNERS 2015 Main  Skill
  3. 3. p  r  i  v  a  t  e  .  1 LINEの履履歴の可視化 3(C) HAKUHODO DY MEDIA PARTNERS 2015
  4. 4. p  r  i  v  a  t  e  .  2 amazonの購⼊入履履歴を可視化 4(C) HAKUHODO DY MEDIA PARTNERS 2015
  5. 5. 5(C) HAKUHODO DY MEDIA PARTNERS 2015 広告会社でプログラミング? プログラミングが主に必要な部署 ※その他、必要に応じて クリエイティブ メディアプランニング ダイレクトマーケティング 研究開発 メディア開発 マーケティング 私が主に 担当している領領域 ※順不不同 私が主に 担当している領領域
  6. 6. (C) HAKUHODO DY MEDIA PARTNERS 2015 6 本資料料のカバー範囲 データ 収集 前処理理 データ 解析 モデリング 可視化 ただし、 アクセス解析、 広告反応データ、 の話ではありません。 ただし、 Tableauによる マーケティング ダッシュボード、 の話ではありません。 ただし、 CVに効く変数の分析、 の話ではありません。 主に解説 主に解説 主に解説 では⼀一体何なのか。 各章で解説します。
  7. 7. (C) HAKUHODO DY MEDIA PARTNERS 2015 7 本題に⼊入る前に… データ 収集 前処理理 データ 解析 モデリング 可視化 データ 解析の 必要性
  8. 8. なぜデータ解析が必要なのか (C) HAKUHODO DY MEDIA PARTNERS 2015 8 神取  道宏  (2014)  『ミクロ経済学の⼒力力』⽇日本評論論社 “⼤大きな⾒見見落落としや、 論論理理の⽳穴がないかをチェックする 有効な⽅方法” “数字を実際に意識識して(⽣生活者が)⾏行行動しているということではなく、 『あなたが⾃自分の好きなウーロン茶茶を飲んでいる』 ということを、間違いなく記述するために、 数字を使って記録したもの、にすぎない。” “常識識でも⼗十分理理解・納得できるが、 モデルの⼒力力を借りずにこれを⼀一発で思いつくのは難しい”
  9. 9. Case.1 データ収集『⼝口コミデータを収集する』 9(C) HAKUHODO DY MEDIA PARTNERS 2015
  10. 10. Case.1 データ収集『⼝口コミデータを収集する』 10(C) HAKUHODO DY MEDIA PARTNERS 2015 ⼝口コミなどのソーシャル情報は、各種ツールで(⼀一部)収集することも できますが、分析⼿手法に合わせて、柔軟に⾃自由なフォーマットで データ収集したいときに。 Ruby  “nokogiri”  +  ”anemone” 再帰読み込み機能(ループ対象ページ、階層指定も可) データ収集・解析可 クローリング間隔指定 構⽂文パーサー クローラー
  11. 11. Case.1 データ収集『⼝口コミデータを収集する』 11(C) HAKUHODO DY MEDIA PARTNERS 2015 たとえば、対象サイトから、ある⾔言葉葉を含むページのみの URL⼀一覧を取得し、アクセス解析ツールで分析したい。 www.**/pg1   www.**/pg2   www.**/pg3   www.**/pg4   www.**/pg5   特定の word このページのアクセス状況を分析し、 サイト全体の傾向と⽐比較、など ※巨⼤大⼝口コミサイトで、膨⼤大にURLが存在するとする 特定の word 特定の word
  12. 12. Case.1 データ収集『⼝口コミデータを収集する』 12(C) HAKUHODO DY MEDIA PARTNERS 2015 たとえば、対象サイトの⼝口コミから、ある⾔言葉葉と同時に書き込まれる ワード(共起語)を時系列列で分析したい。 クチコミ1 クチコミ2 クチコミ3 クチコミ4 クチコミ5 このサイトに含まれる 条件をみたす⼝口コミ⼀一覧から、 特定ワードの共起語を時系列列で分析
  13. 13. Case.1 データ収集『⼝口コミデータを収集する』 13(C) HAKUHODO DY MEDIA PARTNERS 2015 anemoneのインストール 必要なパッケージをロード(適宜) # -*- coding:utf-8 -*- require 'anemone' require 'nokogiri' require 'kconv' require 'csv' gem install anemone
  14. 14. Case.1 データ収集『⼝口コミデータを収集する』 14(C) HAKUHODO DY MEDIA PARTNERS 2015 対象となるURLを設定し、再帰呼び出し(階層指定可) ループ対象となるページを絞りたい場合は 上記ループ中で、正規表現で特定の⽂文字列列を含む サブドメインなどを指定 urls = ["http://***.jp/"] anemone.crawl(urls,:depth_limit => 1) do |anemone| anemone.on_pages_like(%r[month=d+]) do |page|
  15. 15. Case.1 データ収集『⼝口コミデータを収集する』 15 (C) HAKUHODO DY MEDIA PARTNERS 2015 あとは、ブログの抜き出したい箇所に応じて、 正規表現で抜き出すか、あるいはdiv要素であればnokogiriで処理理 たとえば、下記のような要素から、 “⽇日時”、”タイトル”、”ユーザ名”  を抜き出してcsvで書き出したい場合 action-box rounded 新規書き込み 2015/4/16  20:03 「科学技術が発達しすぎて不不安」 mirandora   近年年の科学技術の発展には、⽬目を⾒見見張るものが…  続きを読む h2 title user 新規書き込み 2015/4/16  19:52 「遺伝⼦子検査やってみたいですか?」
  16. 16. Case.1 データ収集『⼝口コミデータを収集する』 16(C) HAKUHODO DY MEDIA PARTNERS 2015 あとは、ブログの抜き出したい箇所に応じて、 正規表現で抜き出すか、あるいはdiv要素であればnokogiriで処理理 #chomp  は改⾏行行を削除 #strip  は先頭や末尾の空⽩白を削除   #gsub  は⽂文字列列を置換する。   #tosjis  は⽂文字コードを変換 CSV.open('amazon.csv','wb') do |csv| csv << ['date','title',‘user'] url = "https://www.****" page = agent.get(url) html =Nokogiri::HTML(page.body,nil,'Shift-JIS') if html.css('span.item-title').text.length == 0 then break else puts url html.search('//div[@class="action-box rounded"]').each_with_index.map do |box,i| date = box.css(‘h2’).text.chomp.strip.gsub(“新規書き込み"," "). tosjis title = box.css('span. title').text.chomp.strip.tosjis user = box.css('div.user').text.chomp.strip.tosjis csv << [date,title,user] end end end
  17. 17. Case.1 データ収集『⼝口コミデータを収集する』 17(C) HAKUHODO DY MEDIA PARTNERS 2015
  18. 18. Case.1 データ収集『⼝口コミデータを収集する』 18(C) HAKUHODO DY MEDIA PARTNERS 2015 補⾜足1:抽出したい要素がうまくdiv要素で指定できないとき →特定の⽂文字列列で正規表現で抽出 date = page.body.toutf8.scan       (%r!<font size=2 face=verdana color=black>(.+?)</font>!) 補⾜足2:メタ⽂文字のエスケープ →正規表現で除去したい⽂文字列列中にメタ⽂文字が有る場合、エスケープ 補⾜足3:⽂文字のエンコード →  anemone、nokogiri処理理まわりで、⼀一度度はエンコードがうまくいかず、   「Encoding::UndefinedConversionError」などに出くわす…。 this_article = this_article.encode(              Encoding::SJIS,              :invalid => :replace,              :undef => :replace) this_article = articles[num].text.chomp.strip.gsub              (/<(".*?"|'.*?'|[^'"])*?>/, "")
  19. 19. Case.2 データ収集『⼼心拍数データを収集する』 19(C) HAKUHODO DY MEDIA PARTNERS 2015
  20. 20. Case.2 データ収集『⼼心拍数データを収集する』 20(C) HAKUHODO DY MEDIA PARTNERS 2015 近年年、arduinoなどで使⽤用できる⼼心拍数センサが安価で⼿手に⼊入るが 特別な装置を使わずウェブカメラ経由でウェブアプリなどを通して ⼼心拍数データを収集する⽅方法を考える。 web  camera  +  web  RTC ウェブカメラのみで可能(特別な装置不不要) HTML5でjavascriptベースで実装可能なweb  RTCを使⽤用
  21. 21. Case.2 データ収集『⼼心拍数データを収集する』 21(C) HAKUHODO DY MEDIA PARTNERS 2015 ⼼心拍数は、指などの映像から得られる “指の先端の⾎血中の酸素濃度度の変化”から推測可能 指の先端の⾎血中の酸素濃度度の変化によって、 「⾚赤⾊色光と⾚赤外光の吸光度度が異異なるので、 センサーで透過光や反射光を測定して分析する」(wikiより) ことによりピーク値を検出することで、⼼心拍数を測定可
  22. 22. Case.2 データ収集『⼼心拍数データを収集する』 22(C) HAKUHODO DY MEDIA PARTNERS 2015 WebRTCは、W3Cによって標準化されている ブラウザでリアルタイムなコミュニケーションを 可能にするAPI 要は、ウェブカメラを⽤用いたライブチャットなどを簡単に作れる。
  23. 23. Case.2 データ収集『⼼心拍数データを収集する』 23(C) HAKUHODO DY MEDIA PARTNERS 2015 まずはWebRTCからの映像取得 (1)  ユーザにカメラやマイクなどのメディアデバイス使⽤用許可を尋ねる。 (2)  getUserMediaでメディアソース取得。     ・第⼀一引数:メディアソースに関する記述(必須)   ・第⼆二引数:メディアソース取得が成功した場合の処理理(必須)   ・第三引数:エラー表⽰示オプション(オプション) navigator.getUserMedia = navigator.getUserMedia ||                        navigator.webkitGetUserMedia ||                        navigator.mozGetUserMedia ||                        navigator.msGetUserMedia; window.URL = window.URL || window.webkitURL; if (!navigator.getUserMedia) { alert("no camera..."); } else{    navigator.getUserMedia(       {audio:true,video:true},        function(stream){           var video = document.getElementById('myVideo');           video.src = URL.createObjectURL(stream);       },       function(error){ console.error(error); }    ); }
  24. 24. Case.2 データ収集『⼼心拍数データを収集する』 24(C) HAKUHODO DY MEDIA PARTNERS 2015 得られた映像から⾚赤⾊色チャンネルの明度度を計算 (1)  映像のフレームごとにcanvasに静⽌止画書き出し (2)  静⽌止画imageの中から⾚赤⾊色チャンネルの明度度を計算   ※各ピクセルの⾚赤⾊色チャンネルを合計し、ピクセル数で割る   ※canvasの各ピクセル情報は、左上から順にR、G、B、アルファのデータ単位で格納 (data[0]〜~data[3]までで1セット、data[4]〜~data[7]で次のピクセル情報の1セット) (3)  上記をタイムスタンプ付きのコンソールログとして書き出す。 canvasの各ピクセル情報 data[0]   data[1]   data[2]   data[3]   1ピクセル⽬目 R   G   B   α   data[4]   data[5]   data[6]   data[7]   2ピクセル⽬目 R   G   B   α  
  25. 25. Case.2 データ収集『⼼心拍数データを収集する』 25(C) HAKUHODO DY MEDIA PARTNERS 2015 得られた映像から⾚赤⾊色チャンネルの明度度を計算 function getRedChannel(){ requestAnimationFrame(getRedChannel);    var video = document.getElementById('myVideo');    var buffer = document.createElement('canvas');    var bufferContext = buffer.getContext('2d');    buffer.width = video.width;    buffer.height = video.height;    bufferContext.drawImage(video, 0, 0,video.width,video.height);    var imagedata =        bufferContext.getImageData(0, 0, video.width, video.height);    var red_channel=0;    for (var i = 0; i < imagedata.data.length; i += 4) {       red_channel += imagedata.data[i+0]    }    console.log("red_channel:" + red_channel/(imagedata.data.length)); }
  26. 26. Case.2 データ収集『⼼心拍数データを収集する』 26(C) HAKUHODO DY MEDIA PARTNERS 2015
  27. 27. Case. 3 データ可視化『Jリーグ』 27(C) HAKUHODO DY MEDIA PARTNERS 2015
  28. 28. 28(C) HAKUHODO DY MEDIA PARTNERS 2015 Case.3 データ可視化『Jリーグ』 データスタジアム社のデータ提供協⼒力力のもと、 2013年年度度のJ1リーグの全選⼿手のプレイデータを解析・可視化。 プレイの特徴を、オープンデータと掛け合わせる。 ⾃自⼰己組織化マップ  +  Three.js 選⼿手のプレイパラメータを2次元に圧縮、選⼿手間の類似を表現 オープンデータという軸を加え、3次元で可視化
  29. 29. Case.3 データ可視化『Jリーグ』 今回使⽤用したデータスタジアム社のデータ どの選⼿手が、どれくらいドリブルしたか、 どんなシュートを打って、何本枠内に⾶飛んだか、 空中戦には、どれくらい競り勝ったか、 パスは、どちらの⽅方向にどれくらい出して、 どれくらい成功したか、などのデータ
  30. 30. 30(C) HAKUHODO DY MEDIA PARTNERS 2015 Case.3 データ可視化『Jリーグ』 やりたかったこと プレイデータから全選⼿手をグルーピングするとともに、 プレイ特徴と、プレイ以外の様々なオープンデータの関係を可視化 (たとえば検索索数) 各プレイ特徴とどのような関係があるか プレイ特徴から 選⼿手をグルーピング
  31. 31. 31(C) HAKUHODO DY MEDIA PARTNERS 2015 Case.3 データ可視化『Jリーグ』 ⾃自⼰己組織化マップ 多次元の情報をもとに、前情報無しに、類似しているものを ⾃自動的に近くにマッピングしていく⼿手法 (1)  任意のユニット数を決める。
  32. 32. 32(C) HAKUHODO DY MEDIA PARTNERS 2015 Case.3 データ可視化『Jリーグ』 ⾃自⼰己組織化マップ 多次元の情報をもとに、前情報無しに、類似しているものを 近くにマッピングしていく⼿手法 (2)  各ユニットごとの初期値をランダムに設定 ※ユニット中の波は、多次元のパラメータ、   わかりやすいように疑似的に⾊色で表現
  33. 33. 33(C) HAKUHODO DY MEDIA PARTNERS 2015 Case.3 データ可視化『Jリーグ』 ⾃自⼰己組織化マップ 多次元の情報をもとに、前情報無しに、類似しているものを 近くにマッピングしていく⼿手法 (3)  各⼊入⼒力力値にもっとも近いユニットを探してマッピング ⼊入⼒力力値 (今回は選⼿手ごとの  パラメータ)
  34. 34. 34(C) HAKUHODO DY MEDIA PARTNERS 2015 Case.3 データ可視化『Jリーグ』 ⾃自⼰己組織化マップ 多次元の情報をもとに、前情報無しに、類似しているものを 近くにマッピングしていく⼿手法 (4)  マッピングした際に周辺値を⼊入⼒力力値で上書き ⼊入⼒力力値 (今回は選⼿手ごとの  パラメータ)
  35. 35. 35(C) HAKUHODO DY MEDIA PARTNERS 2015 Case.3 データ可視化『Jリーグ』 ⾃自⼰己組織化マップ 多次元の情報をもとに、前情報無しに、類似しているものを 近くにマッピングしていく⼿手法 (5)  同様の作業を各⼊入⼒力力値で繰り返す ⼊入⼒力力値 (今回は選⼿手ごとの  パラメータ)
  36. 36. 36(C) HAKUHODO DY MEDIA PARTNERS 2015 Case.3 データ可視化『Jリーグ』 ⾃自⼰己組織化マップ 多次元の情報をもとに、前情報無しに、類似しているものを 近くにマッピングしていく⼿手法 (6)  全ての⼊入⼒力力値のマッピングを終えたら、   それを初期値として、任意の回数学習し直し 前情報を知らなくても、 ⾃自ずと”  組織化” されていく
  37. 37. 37(C) HAKUHODO DY MEDIA PARTNERS 2015 Case.3 データ可視化『Jリーグ』 ⾃自⼰己組織化マップ:追記 ランダムに毎回結果(位置)が変わるため、関係のみに意味がある。 さまざまな解釈ができる柔軟性が魅⼒力力。 主成分分析は、主成分因⼦子に表される情報のみ記述可能。 寄与率率率で何割の情報を表しているかわかるが、表現できない情報は無視。 ⼀一⽅方、⾃自⼰己組織化マップは原理理上すべての情報を細かく表現できる。 クラスタ分析は⾮非線形なデータの分類に不不向き。 より⾼高度度な分類には⾃自⼰己組織化マップの⽅方が適している。 ※⾃自⼰己組織化マップを、n×1のアウトプットにするとクラスタ分析的なn分類が可能。 ⾃自⼰己組織化マップの特徴(何が嬉しいのか?)
  38. 38. 38(C) HAKUHODO DY MEDIA PARTNERS 2015 Case.3 データ可視化『Jリーグ』 ⾃自⼰己組織化マップのRでの実装⽅方法 ライブラリ、データ読み込み library(som) jdata<-read.csv(“jleague.csv”,header=T) 標準化 ※[  ,    :  ]の中で標準化したい列列番号を指定。byrow=Fで全体ではなく、列列ごとに平均0,分散1に n_jdata<-normalize(jdata[,2:14],byrow=F) 出⼒力力 ※  xdimとydimで出⼒力力層の配置 ※  topolで出⼒力力形式指定(=”rect”で格⼦子状の出⼒力力。=”hexa”で蜂の巣) asom <- som(n_adata,xdim=10,ydim=10,topol=”rect”) プロット plot(asom)
  39. 39. 39(C) HAKUHODO DY MEDIA PARTNERS 2015 Case.3 データ可視化『Jリーグ』 実際の結果
  40. 40. 40(C) HAKUHODO DY MEDIA PARTNERS 2015 Case.3 データ可視化『Jリーグ』 実際の結果 FWは近くにマッピングされているが、 その中でもプレイ特徴でさらに分離離 前⽥田と ズラタンが 近い 川⼜又と 豊⽥田が 近い 原⼝口と ⽟玉⽥田が 近い
  41. 41. 41(C) HAKUHODO DY MEDIA PARTNERS 2015 Case.3 データ可視化『Jリーグ』 Three.js WebGL、canvas、svg、CSS3Dをサポートしたブラウザ⽤用の 3D描画ライブラリ。javascriptを⽤用いてプログラミング可。
  42. 42. 42(C) HAKUHODO DY MEDIA PARTNERS 2015 Case.3 データ可視化『Jリーグ』 ⾃自⼰己組織化マップの結果をThree.jsへ変換 ⾃自⼰己組織化マップの各データのユニット位置結果をcsv出⼒力力 asom$visual x y 中村 俊輔 0 0 中澤 佑二 0 9 富澤 清太郎 0 6 榎本 哲也 6 9 栗原 勇蔵 0 9 小林 祐三 0 3 天野 貴史 9 6 中町 公祐 0 4 端戸 仁 9 3 齋藤 学 1 0 兵藤 慎剛 0 0 奈良輪 雄太 9 6 佐藤 優平 9 4 ファビオ 8 7 0   1   2   3   4   5   6   7   8   9   0   1   2   3   4   5   6   7   8   9   csv出⼒力力 イメージ
  43. 43. 43(C) HAKUHODO DY MEDIA PARTNERS 2015 Case.3 データ可視化『Jリーグ』 ⾃自⼰己組織化マップの結果をThree.jsへ変換 three.js前準備 var SCREEN_WIDTH=1500; var SCREEN_HEIGHT=750; renderer = new THREE.CSS3DRenderer(); renderer.setSize(SCREEN_WIDTH,SCREEN_HEIGHT); document.getElementById("container"). appendChild(renderer.domElement); var camera=new THREE.PerspectiveCamera (45,SCREEN_WIDTH/SCREEN_HEIGHT,1,10000); var scene=new THREE.Scene(); scene.add(camera); 3Dを描画するサイズを指定 レンダラを指定 html内の 3D描画div位置を指定 camera位置を指定 シーンを定義
  44. 44. 44(C) HAKUHODO DY MEDIA PARTNERS 2015 Case.3 データ可視化『Jリーグ』 ⾃自⼰己組織化マップの結果をThree.jsへ変換 three.js  ※実際にはcsvファイルを⾃自動で変換 var member_165 = new THREE.CSS3DObject (document.getElementById('member_165')); member_165.position.set(0,350,0); member_165.rotation.x += 0 * Math.PI/180; scene.add(member_165); Xユニット、Yユニットの座標 (任意に設定) <div id='member_165' class=“player">    <img src="./img/player.png"> </div> html Three.jsオブジェクトの宣⾔言 シーンに追加
  45. 45. 45(C) HAKUHODO DY MEDIA PARTNERS 2015 Case.3 データ可視化『Jリーグ』 demo.
  46. 46. Case. 4 データ可視化『神⼾戸市観光』 46(C) HAKUHODO DY MEDIA PARTNERS 2015
  47. 47. 47(C) HAKUHODO DY MEDIA PARTNERS 2015 Case. 4 データ可視化『神⼾戸市観光』 神⼾戸市観光客増加のため、潜在層のウェブ⾏行行動・移動履履歴データを分析。 それらをデータフュージョンし、クラスタごとの神⼾戸市での⾏行行動を可視化。 DMP  +  processing DMPを⽤用いて様々なウェブ⾏行行動を⼀一元管理理 クラスタごとに⽣生成したシミュレーションモデルにより、 ⼈人々の神⼾戸市内での観光状況を可視化
  48. 48. 48(C) HAKUHODO DY MEDIA PARTNERS 2015 Case. 4 データ可視化『神⼾戸市観光』 DMPとは、データマーケティングのためのデータを オンライン上のCookieで格納する箱 DMP (Data  Management  Platform) DMP 会員情報 広告クリック 閲覧コンテンツ ソーシャル 広告接触 趣味・嗜好 閲覧履履歴 1st  Party  Data ⾃自社データ サービス利利⽤用履履歴 2nd  Party  Data 広告データ 3rd  Party  Data 第三者データ
  49. 49. 49(C) HAKUHODO DY MEDIA PARTNERS 2015 Case. 4 データ可視化『神⼾戸市観光』 神⼾戸市様が保有する観光サイト閲覧者が、 デモグラごとに普段どのような検索索をしているか、 どのようなサイトを閲覧しているか、分析 DMP (Data  Management  Platform) DMP スポットごとの神⼾戸市観光ページ →サイト来訪者の   デモグラ・興味を   推計 3rd  Party  Data 第三者データ
  50. 50. 50(C) HAKUHODO DY MEDIA PARTNERS 2015 Case. 4 データ可視化『神⼾戸市観光』 神⼾戸市様が保有する観光サイト閲覧者が、 デモグラごとに普段どのような検索索をしているか、 どのようなサイトを閲覧しているか、分析 DMPと移動履履歴データの統合 (例例)クラスタA 関東男性30代 (例例)クラスタA 関東男性30代 ≒ データフュージョン 限られたモニタでの デモグラごとの移動履履歴データ (推計での)デモグラごとの ウェブ閲覧・検索索履履歴 検索索 ウェブ閲覧
  51. 51. 51(C) HAKUHODO DY MEDIA PARTNERS 2015 Case. 4 データ可視化『神⼾戸市観光』 MITメディアラボで開発された、ビジュアルデザインのためのJAVAベースの プログラミング⾔言語  (wikiより) Processing
  52. 52. 52(C) HAKUHODO DY MEDIA PARTNERS 2015 Case. 4 データ可視化『神⼾戸市観光』 DMP+移動履履歴データをProcessingで可視化 Arima   Rokko   Kobe_port   Sannomiya   Kitano   Suma   (1)  デモグラごとのDMPデータ・移動履履歴から、     おおよそのシミュレーションモデル(どこに⾏行行って何に興味が有るか)を作成 (2)  各デモグラごとに発⽣生頻度度を計算、実際の分布に合わせて各デモグラを⽣生成 (3)  デモグラごとに⾊色分け(男性は⻘青、⼥女女性は⾚赤、年年齢によって⾊色分け) (4)  (1)で⽣生成されたモデルに従って、スポット間を移動、     そこで興味が有ると思われること(検索索ワードより)を表⽰示 カフェ デート 買い物 ⾷食事
  53. 53. 53(C) HAKUHODO DY MEDIA PARTNERS 2015 Case. 4 データ可視化『神⼾戸市観光』 DMP+移動履履歴データをProcessingで可視化 class Tourist{ //現在地(移動中の各時点ごとの) float location_x; float location_y; //居住地(シミュレーションの出発地点) float address_x; float address_y; //デモグラタイプ(⽬目的地/巡回⾏行行動/その場所に求めるもの) float type; //⽬目的地 float next_dist; Location[] dist = new Location[n]; ... } DMP・移動履履歴に基づいてシミュレーション
  54. 54. 54(C) HAKUHODO DY MEDIA PARTNERS 2015 Case. 4 データ可視化『神⼾戸市観光』 DMP+移動履履歴データをProcessingで可視化 class Tourist{ //続き void drawtourist(){ strokeWeight(1); if(type ==1){ stroke(99,184,255); fill(135,206,255,140); }else if(type ==2){ ... } 線の太さ 線の⾊色 塗りの⾊色
  55. 55. 55(C) HAKUHODO DY MEDIA PARTNERS 2015 Case. 4 データ可視化『神⼾戸市観光』 demo.
  56. 56. Case. 5 データ可視化『Darvish』 56(C) HAKUHODO DY MEDIA PARTNERS 2015
  57. 57. 57(C) HAKUHODO DY MEDIA PARTNERS 2015 Case. 5 データ可視化『Darvish』 データスタジアム社のデータ提供協⼒力力のもと、 Darvishが2013年年に投げたボールの全データを可視化&サウンド化 Three.js  +  Web  Audio  API データから⾳音を⾃自動⽣生成 可視化&サウンド化により、Darvishの投球のリズムを体感
  58. 58. 58(C) HAKUHODO DY MEDIA PARTNERS 2015 Case. 5 データ可視化『Darvish』 ダルビッシュが2013年年に投げた1年年間の 球種、球速、結果のデータ
  59. 59. 59(C) HAKUHODO DY MEDIA PARTNERS 2015 Case. 5 データ可視化『Darvish』 さらに、球種ごとの、 縦揺れ、横揺れのデータ
  60. 60. 60(C) HAKUHODO DY MEDIA PARTNERS 2015 Case. 5 データ可視化『Darvish』 “速度度”を周波数(⾳音の⾼高さ)、 “球種”を⾳音波(⾳音の種類)にマッピング ⾳音テーブル 球速  to  周波数変換
  61. 61. 61(C) HAKUHODO DY MEDIA PARTNERS 2015 Case. 5 データ可視化『Darvish』 Web  Audio  API HTML5による、動的に⾳音を⽣生成・処理理するためのJavascript  API。 プラグイン不不要でブラウザのみで⾼高機能な⾳音声処理理が可能。 外部⾳音声読み込みの他、Javascriptのみで⾳音を⽣生成することもできる。 AudioContext 基本構成 Oscillator Effect Destination APIアクセスのためのインスタンス(枠組み) サウンド出⼒力力エフェクトサウンド⼊入⼒力力 connect connect
  62. 62. 62(C) HAKUHODO DY MEDIA PARTNERS 2015 Case. 5 データ可視化『Darvish』 Web  Audio  API var eg = audioctx.createGain(); var osc = audioctx.createOscillator(); osc.connect(eg); eg.connect(audioctx.destination); var audioctx = new AudioContext(); 新しいコンテキストインスタンスを⽣生成 ⼊入出⼒力力と接続 //⾳音量量   eg.gain.value =0.4; //⾼高さ   osc.frequency.value = 1500; //波形   var type = 2; osc.type = ["sine","square","sawtooth","triangle"][type]; ⾳音を⽣生成(⾳音量量、⾼高さ、波形)
  63. 63. 63(C) HAKUHODO DY MEDIA PARTNERS 2015 demo. Case. 5 データ可視化『Darvish』
  64. 64. Case. 6 データ可視化『⽣生活定点』 64(C) HAKUHODO DY MEDIA PARTNERS 2015
  65. 65. 65(C) HAKUHODO DY MEDIA PARTNERS 2015 Case.6 データ可視化『⽣生活定点』 博報堂⽣生活総合研究所が2年年おきに実施している”⽣生活定点” 過去20年年間の⽣生活定点を様々なデータと掛け合わせて可視化 形態素解析  +  アソシエーション分析 ⽣生活定点に含まれている設問と似た内容の記事をクローリング 記事中に含まれているワードを形態素解析 該当記事閲覧者が普段⾒見見ているサイトをアソシエーション分析
  66. 66. 66(C) HAKUHODO DY MEDIA PARTNERS 2015 Case.6 データ可視化『⽣生活定点』 seikatsusoken.jp/teiten2014/
  67. 67. 67(C) HAKUHODO DY MEDIA PARTNERS 2015 Case.6 データ可視化『⽣生活定点』
  68. 68. 68(C) HAKUHODO DY MEDIA PARTNERS 2015 ⽣生活定点データの⾯面⽩白さは、 “過去20年年間の時系列列データ”と”似てるかもグラフ” 1998   2000   2002   2004   2006   2008   2010   Case.6 データ可視化『⽣生活定点』
  69. 69. 69(C) HAKUHODO DY MEDIA PARTNERS 2015 DMPは“今現在の⼈人々の詳細を把握できる”データ 普段の検索索、Q&A、SNS 具体的には、どんなことが気になっているのか 普段の閲覧サイト その⼈人は普段、どのようなメディアに接しているのか ? ? ? 「社会意識識」 現代の科学技術は進歩しすぎていて不不安に思う Case.6 データ可視化『⽣生活定点』
  70. 70. 70(C) HAKUHODO DY MEDIA PARTNERS 2015 ⽣生活定点データにDMPデータを掛け合わせて 分析・ビジュアライズ ? ? ? 1998  2000  2002  2004  2006  2008  2010   DMPデータ ⽣生活者の“今”  を 詳細に捉えるデータ ⽣生活定点データ ⽣生活者の “時系列列推移”を 捉えるデータ Case.6 データ可視化『⽣生活定点』 やりたいこと
  71. 71. 71(C) HAKUHODO DY MEDIA PARTNERS 2015 ? ? ? 1998  2000  2002  2004  2006  2008  2010   Case.6 データ可視化『⽣生活定点』 形態素解析 該当設問に似た記事に含まれるワード アソシエーション分析 普段の閲覧サイト
  72. 72. 72(C) HAKUHODO DY MEDIA PARTNERS 2015 Case.2 : KAO アソシエーション分析 形態素解析 Case.6 データ可視化『⽣生活定点』 辞書や⽂文法ルールなどを⽤用いて、対象⽂文章を、 形態素(意味をもつ最⼩小品詞単位)に分解して解析する⾃自然⾔言語処理理 教科書などで良良くある例例 すもももももももものうち 名詞 助詞 名詞 助詞 名詞 助詞 名詞
  73. 73. 73(C) HAKUHODO DY MEDIA PARTNERS 2015 Case.2 : KAO アソシエーション分析 Rによる形態素解析”RMeCab” Case.6 データ可視化『⽣生活定点』 オープンソース形態素解析エンジンのMeCabを R上で実⾏行行できるパッケージ パッケージ読み込み library(RMeCab) N-‐‑‒gramを出す場合 text<-NgramDF(“./R/sample.txt”,type=1,pos=”名詞”,N=3) ※n-‐‑‒gramとは連続する⽂文字ないし形態素、品詞をペアにした頻度度情報 ※type=0で⽂文字単位、type=1で形態素原型、type=2で品詞情報単位 ※posで抽出する品詞を指定(カンマ区切切りで複数指定も可能)   pos  =  c(“名詞”,”動詞”,”助詞”) ※デフォルトはN=2のバイグラム。N=3とすると3つの語の連続
  74. 74. 74(C) HAKUHODO DY MEDIA PARTNERS 2015 Case.6 データ可視化『⽣生活定点』 形態素解析の結果 バイグラム 科学 技術 クローン ⼈人間 技術 開発 巨⼤大 化 遺伝⼦子 操作 プラス マイナス 技術 モラル 技術 獲得 技術 発達 バイオテクノロジー 技術 ⼈人類 知恵 ⼈人類 進化 個⼈人 的 技術 プラス 技術 マイナス 技術 社会 Term Info1 Info2 Freq 技術 名詞 ⼀一般 66   ⼈人間 名詞 ⼀一般 49   進化 名詞 サ変接続 32   科学 名詞 ⼀一般 26   ⼈人類 名詞 ⼀一般 18   本能 名詞 ⼀一般 16   ⽣生物 名詞 ⼀一般 16   環境 名詞 ⼀一般 15   社会 名詞 ⼀一般 15   プラス 名詞 ⼀一般 14   これ 名詞 代名詞 14   遺伝⼦子 名詞 ⼀一般 12   クローン 名詞 ⼀一般 11   モラル 名詞 ⼀一般 11   知恵 名詞 ⼀一般 11   出現頻度度
  75. 75. 75(C) HAKUHODO DY MEDIA PARTNERS 2015 Case.6 データ可視化『⽣生活定点』 形態素解析からワードをマッピング ネットワークグラフデータに変換 ※そのままやるとごちゃごちゃするので頻度度で制限かけるとよい ネットワーク結果をHTML5(SVG)でトレース※デモグラごとに library(igraph) net<-graph.data.frame(text[text$Freq > 2,]) plot(net)
  76. 76. 76(C) HAKUHODO DY MEDIA PARTNERS 2015 Case.2 : KAO アソシエーション分析 下記3指標から、”良良い組み合わせルール”を算出 ⽀支持度度(Support) 信頼度度(Confidence) リフト値(Lift) ※データ件数全体で、そのアソシエーションルールが存在する割合 全件数 条件(X)と結論論(Y)をともに含む件数 = 条件(X)を含む件数 条件(X)と結論論(Y)をともに含む件数 = 結論論(Y)が起こる確率率率 信頼度度(X⇒Y) = ※単純にYが起こる事象と⽐比較して、条件Xが加わることで、どの程度度そのルールが発⽣生する確率率率が上昇するかの指標 全データ サイトAを⾒見見ていて、 かつサイトBを ⾒見見ているユーザ サイトAを⾒見見ているユーザ かつサイトBを ⾒見見ているユーザ 全データ サイトBを ⾒見見ているユーザ サイトAを ⾒見見ているユーザ かつサイトBを ⾒見見ているユーザ ⽐比較 ⽐比較 ⽐比較 Case.6 データ可視化『⽣生活定点』 アソシエーション分析
  77. 77. 77(C) HAKUHODO DY MEDIA PARTNERS 2015  lhs                                            rhs                                                support        confidence                  liL   1    {X23=site_A}  =>  {X8=site_B}                      0.0001107224  0.013192612  0.414580361   2    {X8=site_B}    =>  {X23=site_A}                0.0001107224  0.003479471  0.414580361   3    {X5=site_C}  =>  {X13=site_D}    0.0001328668  0.008438819  0.513585133   4    {X13=site_D}  =>  {X5=site_C}                  0.0001328668  0.008086253  0.513585133   5    {X5=site_C}                =>  {X11=site_E}                            0.0001993002  0.012658228  0.325153728   6    {X11=site_E}                          =>  {X5=site_C}                  0.0001993002  0.005119454  0.325153728   7    {X5=site_C}                =>  {X22=site_F}                0.0001328668  0.008438819  0.182247809   8    {X22=site_F}              =>  {X5=site_C}                  0.0001328668  0.002869440  0.182247809   9    {X5=site_C}                =>  {X25=site_G}                    0.0001328668  0.008438819  0.030992206   10  {X1=site_H}                    =>  {X3=site_I}                    0.0001328668  0.008241758  0.258279888   11  {X3=site_***}                  =>  {X1=site_***}                  0.0001328668  0.004163775  0.258279888   12  {X13=site_***}    =>  {X14=sote_***}                  0.0001328668  0.008086253  0.353836269   13  {X14=site_***}                    =>  {X13=site_***}  0.0001328668  0.005813953  0.353836269   14  {X13=site_***}    =>  {X3=site_***}                0.0002435892  0.014824798  0.464578918   15  {X3=site_***}                  =>  {X13=site_***}  0.0002435892  0.007633588  0.464578918   16  {X13=site_***}    =>  {X11=site_***}                        0.0002214447  0.013477089  0.346187931   17  {X11=site_***}                        =>  {X13=site_***}  0.0002214447  0.005688282  0.346187931   18  {X21=site_***}                      =>  {X14=site_***}                  0.0001107224  0.005096840  0.223026259   19  {X14=site_***}                    =>  {X21=site_***}                    0.0001107224  0.004844961  0.223026259   20  {X21=site_***}                      =>  {X8=site_***}                  0.0001993002  0.009174312  0.288304508   21  {X8=site_***}                    =>  {X21=site_***}                    0.0001993002  0.006263048  0.288304508   22  {X21=site_***}                      =>  {X25=site_***}                0.0001550113  0.007135576  0.026205948   23  {X4=site_***}                      =>  {X3=site_***}                0.0001107224  0.004752852  0.148944676   24  {X3=site_***}                  =>  {X4=site_***}                    0.0001107224  0.003469813  0.148944676   25  {X4=site_***}                      =>  {X11=site_***}                        0.0001328668  0.005703422  0.146504626   26  {X11=site_***}                          =>  {X4=site_***}                    0.0001328668  0.003412969  0.146504626   27  {X4=site_***}                      =>  {X6=site_***}                      0.0001107224  0.004752852  0.111034287   28  {X6=site_***}                        =>  {X4=site_***}                    0.0001107224  0.002586653  0.111034287   29  {X4=site_***}                      =>  {X25=site_***}                0.0001550113  0.006653992  0.024437296   30  {X14=site_***}                    =>  {X3=site_***}                0.0001550113  0.006782946  0.212563680   31  {X3=site_***}                  =>  {X14=site_***}                  0.0001550113  0.004857738  0.212563680   32  {X14=site_***}                    =>  {X8=site_***}                  0.0003321671  0.014534884  0.456761502   33  {X8=site_***}                    =>  {X14=site_***}                  0.0003321671  0.010438413  0.456761502   34  {X14=site_***}                    =>  {X11=site_***}                        0.0002214447  0.009689922  0.248906439   35  {X11=site_***}                          =>  {X14=site_***}                  0.0002214447  0.005688282  0.248906439     以下略略 機械的にルールを抽出 Case.6 データ可視化『⽣生活定点』 アソシエーション分析
  78. 78. 78(C) HAKUHODO DY MEDIA PARTNERS 2015 Case.6 データ可視化『⽣生活定点』 Rでのアソシエーション分析 d.mx<-as.matrix(d) d.tran<-as(d.mx,”transactions”) ライブラリ読み込み library(“arules”) データをトランザクション形式に変換する必要あり d_low.ap<-apriori(d.tran.parameter=list(support=0.05))  d.ap<-apriori(d.tran) summary(d.ap) inspect(head(sort(d.ap,by=’support’),n=10)) アソシエーションルール表⽰示 ルールが多過ぎたり、少なすぎる場合は、下記のようにパラメータ調整
  79. 79. 79(C) HAKUHODO DY MEDIA PARTNERS 2015 Case.6 データ可視化『⽣生活定点』 アソシエーション分析からサイトをマッピング Q&A (例例)「科学技術の進歩が不不安」 リフト値が⼤大きいものを 中⼼心から近くに リフト値が⼩小さいものを 中⼼心から遠くに サイトのジャンルに応じて、 配置⾓角度度を決定 ※似たジャンルのサイトは、近くに配置
  80. 80. 80(C) HAKUHODO DY MEDIA PARTNERS 2015 demo. Case.6 データ可視化『⽣生活定点』
  81. 81. Case. 7 データ可視化『Takumi』 81(C) HAKUHODO DY MEDIA PARTNERS 2015
  82. 82. 82(C) HAKUHODO DY MEDIA PARTNERS 2015 Case. 7 データ可視化『Takumi』 ⽯石⽥田拓拓⼰己のSNS上の発⾔言履履歴を⽤用いた 形態素解析および機械学習によるデータビジュアライズ Ruby  “nokogiri”  +  “anemone” +  Web  Audio  API  +  three.js +  形態素解析 本⽇日のおさらい的な内容のオマケです。お気軽な気持ちでお聞きください。 友⼈人の披露露宴の出し物。※なぜかサンクスレターの直前の⼤大トリで。
  83. 83. 83(C) HAKUHODO DY MEDIA PARTNERS 2015 Case. 7 データ可視化『Takumi』 これまで仕事で多忙だった拓拓⼰己くん。 これからは早く帰って家族の時間を確保してほしい。 背景
  84. 84. 84(C) HAKUHODO DY MEDIA PARTNERS 2015 Case. 7 データ可視化『Takumi』 ⼀一⽅方で、これから誰を、 業務&飲みに誘えば良良いのか。 背景
  85. 85. 85(C) HAKUHODO DY MEDIA PARTNERS 2015 Case. 7 データ可視化『Takumi』 早く帰って欲しいが、帰って欲しくない。 従来、このような問題は、 組織やコミュニケーション上の問題と 誤解されていた。 背景
  86. 86. 86(C) HAKUHODO DY MEDIA PARTNERS 2015 Case. 7 データ可視化『Takumi』 しかし我々は博報堂”Data  Wings” 今回もデータで課題を解決したいと思います。 背景
  87. 87. 87(C) HAKUHODO DY MEDIA PARTNERS 2015 拓拓⼰己くんのSNS・メール上の発⾔言履履歴を収集 Data Modeling Face book blog Mail Case. 7 データ可視化『Takumi』
  88. 88. 88(C) HAKUHODO DY MEDIA PARTNERS 2015 Case. 7 データ可視化『Takumi』 形態素解析
  89. 89. 89(C) HAKUHODO DY MEDIA PARTNERS 2015 Case. 7 データ可視化『Takumi』 形態素解析
  90. 90. 90(C) HAKUHODO DY MEDIA PARTNERS 2015 Case. 7 データ可視化『Takumi』 "拓拓⼰己君が⾔言いそうなこと"を 機械学習でモデリング 拓拓⼰己君には早く帰っていただきつつ、 我々は彼のシミュレーターと 仕事や飲みをしよう というソリューションです。
  91. 91. 91(C) HAKUHODO DY MEDIA PARTNERS 2015 Case. 7 データ可視化『Takumi』 構成 形態素 解析 Face book blog Mail Three .js Web  Audio  API
  92. 92. 92(C) HAKUHODO DY MEDIA PARTNERS 2015 demo. Case. 7 データ可視化『Takumi』
  93. 93. (C) HAKUHODO DY MEDIA PARTNERS 2015 93 データの分析、 あるいは、そもそものデータ⾃自体、 主観的な要素を含む
  94. 94. (C) HAKUHODO DY MEDIA PARTNERS 2015 94 様々な⽴立立場の⽅方の、 それぞれのデータの向き合いによる 多層的な理理解・解釈が重要だと思います。
  95. 95. (C) HAKUHODO DY MEDIA PARTNERS 2015 95 データビジュアライズのメリット 探索索的なデータ分析を促す データを⾒見見るのも嫌な⼈人に、 データの持つ⾯面⽩白味を伝える データリテラシーに関わらず、 対等な⽴立立場でディスカッションを⽣生む ※逆にデータサイエンティストがドヤ顔で、 グラフや表で分析結果を⾒見見せると、専⾨門家以外、突っ込みづらい
  96. 96. (C) HAKUHODO DY MEDIA PARTNERS 2015 96 どういうデータを使って どういう前処理理をして どういう世界の構造を仮定するのか ⾃自分がどういうストーリー、メタファーで 現象をあらわしたいか データ分析はエモーショナル
  97. 97. (C) HAKUHODO DY MEDIA PARTNERS 2015 97  以上。 ありがとうございました。 HIROYUKI.SHINODA@hakuhodody-­‐media.co.jp @mirandora_com www.mirandora.com Mail web tw
  98. 98. 参考⽂文献 98(C) HAKUHODO DY MEDIA PARTNERS 2015 るびきち  (著),  佐々⽊木  拓拓郎郎    (著)  (2014)『Rubyによるクローラー開発技法』、SBクリエイティブ Sau  Sheong  Chang  (著),  瀬⼾戸⼭山  雅⼈人・河内  崇・  ⾼高野  雅典・橋本  吉治  (翻訳)   (2013)『RとRubyによるデータ解析⼊入⾨門』、オライリージャパン 豊⽥田  秀樹  (著)    (2008)『データマイニング⼊入⾨門』、東京図書 Boris  Smus  (著)、⾼高崎拓拓哉・株式会社トップスタジオ  (翻訳)   (2013)『Web  Audio  API』、オライリージャパン ⽯石⽥田  基広・⼩小林林  雄⼀一郎郎  (著)    (2013)『Rで学ぶ⽇日本語テキストマイニング』、ひつじ書房 神取  道宏  (2014)  『ミクロ経済学の⼒力力』⽇日本評論論社 ※その他、本章には引⽤用していませんが、”データ解析の必要性”として参考となる図書 デイヴィッド・マクレイニー  (著),  安原  和⾒見見  (翻訳)  (2014)『思考のトラップ』⼆二⾒見見書房 ロバート・P・クリース  (著),  吉⽥田  三知世  (翻訳)  (2010) 『世界でもっとも美しい10の物理理⽅方程式』⽇日経BP社 各章の統計・プログラミング 冒頭の”なぜデータ解析が必要か”の引⽤用

×