View
2.207
Download
11
Category
Preview:
Citation preview
どんなデータでもキレイに魅せる！ ～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
提 供
全ての人にデータ可視化技術を
Recommended