どんなデータでもキレイに魅せる！ ～HTML5/JavaScriptでグラフを描画する今どき手法～

たけうち　ひでゆき

自己紹介

自己紹介

● 株式会社ユーザベース

● チーフテクノロジスト (=CTØ)

/ イノベーション担当執行役員

● 技術特性: 広く浅く時々深く

パソコンが関わる事なら大体何でも好き

3

たけうち ひでゆき @chimerast

E2D3紹介

● OSSプロジェクト

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

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

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

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

ゆるく関わっています

4

E2D3: Excel to D3.js

後ほどもうちょっと詳しく説明します

提　供

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

データ可視化

自己紹介

データ可視化の必要性

最近のデータ可視化

D3.jsを使ったデータ可視化

D3.jsを使ってみる

オープンソースプロジェクト「E2D3」の紹介

8

データ可視化の必要性

● データドリブンな意思決定への需要の高まり

● 大きな(複雑なデータ)を素早く理解しなければならない

● データを人の目で知覚可能な形へと「可視化」する

● データビジュアライゼーションへの注目

9

データ可視化の例10

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

データビジュアライゼーションの定義

● あるデータセットが、予め用意されたアルゴリズムを用い

て、コンピュータによって描画されること。

● その描画によってデータセットを眺めているだけではわから

ない傾向や特徴が明らかになっていること。

● アルゴリズムはコーディングによって定義され、形式知化／

可視化されていること。

● ソート、フィルター、トグルなどのインタラクションが可能で、

その場でその結果がすぐ得られること。

11

出典: http://visualizing.jp/infograph_vs_dataviz/

インフォグラフィックスとの対比12

● データをありのままに見せ、

見る人にデータを触らせる

● どちらかというとエンジニア

サイドから出てきたもの

● 管理画面・ダッシュボードで

使われることが多い

● ストーリーに沿うようにデータを選

択してわかりやすく見せる

● どちらかというとデザイナサイドか

ら出てきたもの

● ニュース記事で使われることが多

い

インフォグラフィックスデータビジュアライズ

最近のデータ可視化

自己紹介

データ可視化の必要性

最近のデータ可視化

D3.jsを使ったデータ可視化

オープンソースプロジェクト「E2D3」の紹介

14

ブラウザ上でのデータ可視化

The Wealth & Health of Nationshttp://bost.ocks.org/mike/nations/

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

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

compares.html

dc.jshttp://dc-js.github.io/dc.js/

15

最近データ可視化の流れ

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

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

いままでIE6,7,8がネックだった

報道にもデータ可視化の技術が使われるようになってきた

データジャーナリズム

報道機関各社にデータビジュアライズ専門の部署ができは

じめている

20

D3.jsを使ったデータ可視化

データ可視化の必要性

自己紹介

最近のデータ可視化

D3.jsを使ったデータ可視化

オープンソースプロジェクト「E2D3」の紹介

22

http://d3js.org/23

D3.jsについて

● Data Driven Document の略

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

集めたライブラリ

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

● Mike Bostock 作

○ 今はThe New York Timesで

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

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

24

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)

25

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

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

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

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

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

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

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

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

D3.jsが提供する機能26

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

D3.jsを試すのに便利な環境

JSFiddlehttp://jsfiddle.net/

HTML + CSS + JavaScript をブラウザ上で試せる環境

左側の「Frameworks & Extensions」から「D3」を選択すると

D3.jsを簡単に試せる

27

SVG: Smart Vector Graphics

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

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

28

<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 + CSS29

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>

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

SVGのDOMをいじって

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

● パスを変化させたり

● 地図を書いたり

30

D3のDOM操作の基本

jQueryと同じようなSelectorを使ってDOMを選択し、

それに対して操作を行います。

http://jsfiddle.net/chimerast/7f5L0Lc3/

d3.select(‘svg’).selectAll(‘rect’) // svgの中のrectを選択

.data(array) // 選択されたrectの集合にデータを紐付ける

.enter().append(‘rect’) // データの数に足りない分だけrectを増やす

.attr(‘width’, function (d) { return d.width; }); // データを使って属性変更

31

.enter() と .exit()

.enter()

● selectAll()で取り出したDOM要素より紐付けられたデータが多ければ、その差

分の個数だけ空の箱を作成し返す

● 普通はその箱に対して.append()で要素を追加

● 必要になったDOM要素をフェードインや画面外からのアニメーションで追加出来

る

.exit()

● .enter()の逆でDOMが多い分だけそのDOM要素を返す

● いらなくなったDOM要素をフェードアウトさせつつ消したり出来る

32

.enter()33

.data()

.selectAll()

.enter()http://jsfiddle.net/chimerast/bakt43od/1/

.exit()34

.data()

.selectAll()

.exit()

Scale

ある範囲の値を別の範囲の値に射影する関数を返す仕組み

データを実際の画面上の距離に変換するのに使う

http://jsfiddle.net/chimerast/d6yguho8/

var x = d3.scale.linear() .range([0, 100]) // 0から100の範囲に

.domain([-100, 200]); // -100から200の値を射影する

x(-100); // -> 0

x(100); // -> 66.66666

35

Transition

数値や属性を目的の値に徐々に変化させる仕組み

アニメーションをするのに使う

http://jsfiddle.net/chimerast/fdf6u5x7/

.attr('height', 0) // 元々の高さが0で.transition().delay(2000) // 2秒間で

.attr('height', 100); // 100の高さにする

36

Event

要素に対してイベントを追加する仕組み

jQueryの.on()と変わらない

http://jsfiddle.net/chimerast/g0b7sywe/

.on('click', function (d) { alert(d);})

37

http://jsfiddle.net/chimerast/9bw84gdt/

まとめとして棒グラフを書いてみる38

例: http://bl.ocks.org/mbostock/3943967

並んだ棒グラフと積み上げをボタン一つで切り替え

※通常はふたつのグラフを並べる必要がある

棒グラフ(Bar Chart)もこんなリッチに39

Coffee Flavour Wheelhttp://www.jasondavies.com/coffee-wheel/

木構造が表現可能 -> 視覚的にブレイクダウンできる

円グラフ(Pie Chart)もこんなリッチに40

Word Cloud

http://www.jasondavies.com/wordcloud/#%2F%2Fwww.jasondavies.

com%2Fwordcloud%2Fabout%2F

もちろんExcelではできないことも41

「E2D3」の紹介

自己紹介

データ可視化の必要性

最近のデータ可視化

D3.jsを使ったデータ可視化

オープンソースプロジェクト「E2D3」の紹介

43

OSSプロジェクト「E2D3」

E2D3: Excel to D3.js http://e2d3.org/

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

Officeストア にて配信中

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

現在絶賛開発中

求むコントリビュータ—！

44

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

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

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

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

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

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

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

45

デモ

ユースケース

営業・コンサルタント

データを地図等にマッピング

収集したデータをインタラクティブに可視化

Webニュース記者・編集者

データジャーナリズム

読者にデータを触らせて気づかせる

47

E2D3の仕組み

Excel2013 および Office365 には、

HTMLとJavaScriptで作られたアプリを

追加する機能があるのでそれを利用

Apps for Office

https://msdn.microsoft.com/JA-JP/library/office/jj220060.aspx

JavaScript API for Office

https://msdn.microsoft.com/ja-jp/library/office/fp142185.aspx

48

テンプレート開発はとっても簡単

https://github.com/e2d3/e2d3-

contrib/tree/master/barchart-javascript

main.jsを書くだけ

● root変数に描画すべき先のDOMノードが入っている

● update(data) 関数を定義するとシステム側から呼び出され

dataにExcelのセルのデータが入ってくる

● dataを各種形式に変換する便利関数があります

49

Excelが無くても開発出来ます

ブラウザとエディタとnode.jsさえあればOK

将来的にはブラウザだけで開発したい

ファイルを保存すると勝手にブラウザの再読込がされる

LiveReload機能付き！

CoffeeScript, React(JSX)でも直接かけます！

実はD3.js使わずthree.jsつかったりもできる(IE11以上要)

50

E2D3の直近の開発予定

データ可視化テンプレートを簡単に公開・検索できる機能

現在はe2d3-contribレポジトリに追加すると公開

任意のGitHubのレポジトリ等を配信可能に

可視化されたデータを共有・利用できる機能

FacebookやTwitter等に可視化したデータをシェア

JS/CSS/データを塊としてExportしブログ等に追加

51

OSSへのコントリビュート

詳しくはWikiを参照

https://github.com/e2d3/e2d3/wiki/Getting-Started

https://github.com/e2d3/e2d3-contrib/wiki/Let's-add-a-map-by-E2D3

チャートを作ったらe2d3-contribにpull requestを投げてくださ

い

よくわからなかったらTwitterで #e2d3 つけてつぶやく

e2d3やe2d3-serverへの機能追加も歓迎です

52

まとめ

● モダンブラウザの普及によりデータビジュアライズが当たり

前の技術になり始めています

● D3.jsを使うとデータビジュアライズを比較的簡単に作れま

す

● E2D3が普及すると、プログラマ以外もデータビジュアライズ

の恩恵を受けられるようになります

53

提　供

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