Copyright 2015 CYBIRD Co., Ltd.

HTML5とデータ可視化とExcel

株式会社サイバード データアナリスト 博士 (工学)

大曽根 圭輔

【#techbuzz】8/24 第16回 HTML5+JS 勉強会

1

自己紹介•大曽根圭輔@dr_paradi 博士(工学) 茨城県出身 •現在の仕事ゲームのデータ分析

•趣味 たくさん- やる: バンド、スポーツ (フットサル、ランニング) - 観る: スポーツ、ライブ

2

自己紹介•大曽根圭輔@dr_paradi 博士(工学) 茨城県出身 •現在の仕事ゲームのデータ分析

•趣味 たくさん- やる: バンド、スポーツ (フットサル、ランニング) - 観る: スポーツ、ライブ

3

自己紹介•大曽根圭輔@dr_paradi 博士(工学) 茨城県出身 •現在の仕事ゲームのデータ分析

•趣味 たくさん- やる: バンド、スポーツ (フットサル、ランニング) - 観る: スポーツ、ライブ

4

目次 5

•データ可視化の重要性 •復習 HTML5

•データ活用の流れ (弊社事例) •データ可視化におけるHTML5の役割 + D3.js

•E2D3の紹介

の前に

6

HTML5 と

データ(解析)って関連あるの?

7

私の経歴

8

2012エンジニア(HTML5とかCSS + Objective-C)

2013データアナリスト

2014 データアナリスト兼フロントエンジニア

HTML5を用いた セマンティックな文書作成

ゲーム事業本部　事業統括部

大曽根圭輔

2012年の発表内容

2012/12/13 HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 ～先行事例紹介／交流会～

現在の業務

•スマホ向けのWebサイトを作ったり • iOSのアプリ作ったり • Facebookアプリ作ったり。。。

2012年の発表内容

2012/12/13 HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 ～先行事例紹介／交流会～

2013年某日

2014/06/13 若手Webエンジニア交流会発表資料「博士課程の新卒エンジニアがデータ分析環境を作った話

偉い人

会社のゲームも軌道に乗ってきたので、データ分析に力を入れたい。 君の経験を買ってデータアナリストになって欲しい

私

2014年の発表内容

2014/06/13 若手Webエンジニア交流会発表資料「博士課程の新卒エンジニアがデータ分析環境を作った話

偉い人

会社のゲームも軌道に乗ってきたので、データ分析に力を入れたい。 君の経験を買ってデータアナリストになって欲しい

私まかせて下さい！

2014年の発表内容

2014/06/13 若手Webエンジニア交流会発表資料「博士課程の新卒エンジニアがデータ分析環境を作った話

14

HTML5(+JavaScript)エンジニア から

データアナリストに転向

15

過去のスキルは活用できるのか?

16

データ可視化 で活用できました！

17

今回は (一見)関係なさそうに見える データ解析(≒ビッグデータ)

と HTML5

についてお話しします

目次 18

•データ可視化の重要性 •復習 HTML5

•データ活用の流れ (弊社事例) •データ可視化におけるHTML5の役割 + D3.js

•E2D3の紹介

データ可視化の重要性

データ可視化への注目

19

•データドリブンな意思決定に注目が集まる(≒ビッグデータ)

•人間は大きな(複雑なデータ)を認識できない •データを人の目で知覚可能な形へと「可視化」する

データ可視化の例

都市ごとの気温の変化

20

データ可視化の例

都市ごとの気温の変化

21

データ可視化の例

県ごとのコンビニ店舗数の可視化

22

データ可視化の例

県ごとのコンビニ店舗数の可視化

23

24

こういうグラフを HTML5 + CSSで

書けます!

ブラウザ上でのデータ可視化The Wealth & Health of Nations http://bost.ocks.org/mike/nations/

Four Ways to Slice Obama’s 2013 Budget Proposal http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html

The Facebook Offering: How It Compares http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html

25

26

27

28

最近データ可視化の流れ

ウェブブラウザの機能が増え表現力が上がってきた

ユーザの操作によるインタラクティブな表現の増加

いままではIE6,7,8がネック

29

本日紹介するグラフは、 30

でできています

目次 31

•データ可視化の重要性 •復習 HTML5

•データ活用の流れ (弊社事例) •データ可視化におけHTML5の役割 + D3.js

•E2D3の紹介

HTML5 復習 32

• Graphics

• Device Access

• Multi Media

• Web Components

• Offline Web Application

• Realtime Connectivity

HTML5 復習 33

• Graphics

• Device Access

• Multi Media

• Web Components

• Offline Web Application

• Realtime Connectivity

Graphics

-> グラフィックの表現が豊富 制御が簡単に

34

• SVG

• WebGL

• Canvas

Offline Web Application

-> 通信を減らすことができる　※データの整形、取得には時間がかかることが多いため

35

• Application Cache

• Web Storage

• Service Workers

• Online Offline Events

• File System API

アニメーション 36

• Meaningful Transitionhttp://www.google.com/design/spec/animation/meaningful-transitions.html

目次 37

•データ可視化の重要性 •復習 HTML5

•データ活用の流れ (弊社事例) •データ可視化におけHTML5の役割 + D3.js

•E2D3の紹介

データ活用の流れ分析環境概要図

Amazon RDS

Amazon EMR

Amazon S3Amazon EC2

DB

WEB/アプリ

データ転送用

データフロー

処理コマンド

分析環境各サービス

アナリスト

プロデューサディレクタ

38

各サービス

いままで

管理ツール

集計

可視化

管理ツール

集計

可視化

管理ツール

集計

可視化

管理ツール

集計

可視化

・・・

・・・

・・・

・・・

39

各サービス 各サービス 各サービス

各サービス

いままで

管理ツール

集計

可視化

管理ツール

集計

可視化

管理ツール

集計

可視化

管理ツール

集計

可視化

・・・

・・・

・・・

・・・

40

各サービス 各サービス 各サービス

各サービス

現在各サービス 各サービス 各サービス

・・・

集計 可視化

・・・

41

各サービス

現在各サービス 各サービス 各サービス

・・・

集計 可視化

・・・

42

Copyright 2015 CYBIRD Co., Ltd.

可視化ツール(BIツール)

• 自社開発のモニタリングツール

• データを可視化し、複数のタイトルの

状況を複数の指標で確認

43

各サービス

現在各サービス 各サービス 各サービス

・・・

集計 可視化

・・・

44

目次 45

•データ可視化の重要性 •復習 HTML5

•データ活用の流れ (弊社事例) •データ可視化におけHTML5の役割 + D3.js

•E2D3の紹介

http://d3js.org/ 46

HTML5 復習 47

• Graphics

• Device Access

• Multi Media

• Web Components

• Offline Web Application

• Realtime Connectivity

SVG (Scalable Vector Graphics)

https://ja.wikipedia.org/wiki/Scalable_Vector_Graphics

48

• ベクターグラフィックできれい

• Canvasに比べてインタラクティブなUIを作りやすい（内部的にDOMを持つため）

XMLをベースにした2次元ベクター画像フォーマット

最近のブラウザがサポート: IE9以上, Firefox, Chrome

<svg width="120" height="120"> <rect x="10" y="10" width="100" height="100"rx="15" ry="15" /> </svg>

基本D3.jsはSVG DOM Nodeを いじって最終的な画像を作り出す

SVG (Scalable Vector Graphics)49

SVG + CSS

rect { fill: #fcc; stroke: black; stroke-width: 5px; }

<svg width="120" height="120"> <rect x="10" y="10" width="100" height="100"rx="15" ry="15" /> </svg>

50

イベント<svg width="120" height="120"> <rect x="10" y="10" width="100" height="100"rx="15" ry="15" /> </svg>

d3.selectAll(”rect”) .on(“click”, function () { d3.select(this) .style(“fill”, “#F00”) });

51

D3.jsについてData Driven Document の略

データビジュアライズを作るのに必要なものを

集めたライブラリ

ビジュアライズそのものを提供しているものではない

Mike Bostock 作

今はThe New York Timesで

グラフィックエディターをしている

http://bost.ocks.org/mike/

52

D3.jsのビジュアライズの基本53

SVGのDOMをいじって

あたらしく図形を追加したり削除したり

パスを変化させたり

地図を書いたり

Core データ操作や取得、アニメーション、色等の共通機能群

Scales データと描画座標の間の変換する機能群

SVG SVGのオブジェクトを作るための便利機能群

Time 時間の操作や文字列との間の変換機能群

Layouts データによる配置に関する機能群

Geography 地理データの射影などを行う機能群

Geometry ボロノイ図等の2次元の可視化表現を扱うための機能群

Behaviors ドラッグやズームなどを扱う機能群

D3.jsが提供する機能 54

https://github.com/mbostock/d3/wiki/API-Reference

D3.jsのいいところとにかくサンプルが多い

d3.js Gallery (https://github.com/mbostock/d3/

wiki/Gallery)

bl.ocks.org (http://bl.ocks.org/)

Gistに上がっているデータ可視化表現を描画してくれ

るサイト

Mike Bostock のものを見るだけでもお

なかいっぱい(849個)

(http://bl.ocks.org/mbostock)

55

D3.jsのいけてないところ56

•覚えることが多い、意外と処理が複雑-> そもそもデータ可視化が難しい

•デザイン、データ分析、ビジネス理解など複数の知識が必要(そんなエンジニアなかなかいない)-> データ可視化を必要とする営業やアナリスト　が使うことができない

目次 57

•データ可視化の重要性 •復習 HTML5

•データ活用の流れ (弊社事例) •データ可視化におけHTML5の役割 + D3.js

•E2D3の紹介

58

E2D3紹介E2D3: Excel to D3.js

OSSプロジェクト

全ての人にデータ可視化技術を

Excel上でデータを入力し、人の作った

データ可視化プログラムで可視化を行える

30人ぐらいの人がコントリビュータとして

ゆるく関わっています

59

全ての人にデータ可視化技術を

データ可視化を作り上げるのはとても大変！

見かけたものをちょっと使ってみたいなと思っても

特にノンプラグラマには絶対無理

エンジニアが作ったデータ可視化のテンプレートに

Excelからデータを流し込めると良いのでは？

プロジェクトのミッション60

OSSプロジェクト「E2D3」E2D3: Excel to D3.js http://e2d3.org/

GitHub: https://github.com/e2d3/e2d3/

Officeストア にて配信中

Excel2013以上 もしくは ブラウザのOffice365上で動作

現在絶賛開発中 求むコントリビュータ—！

61

デモ

62

各サービス

いままで

管理ツール

集計

可視化

各サービス

管理ツール

集計

可視化

各サービス

管理ツール

集計

可視化

各サービス

管理ツール

集計

可視化

・・・

・・・

・・・

・・・

63

各サービス

現在各サービス 各サービス 各サービス

・・・

集計 可視化

・・・

64

各サービス

未来?各サービス 各サービス 各サービス

・・・

集計

可視化

65

まとめ

66

データ可視化の重要性

データ可視化への注目

67

•データドリブンな意思決定に注目が集まる(≒ビッグデータ)

•人間は大きな(複雑なデータ)を認識できない •データを人の目で知覚可能な形へと「可視化」する

68

データ可視化 に注目が集まる

69

70

71

72

ダイナミックでインタラクティ なグラフが書ける

73

D3.jsでデータビジュアライズ を比較的簡単に作れる

74

E2D3で プログラマ以外もデータ可視化！

ご静聴ありがとうございました!

75