Embed Size (px)
Citation preview
オープンソースプロジェクト
E2D3のご紹介
たけうち ひでゆき
提 供
全ての人にデータ可視化技術を
自己紹介
● 株式会社ユーザベース
● チーフテクノロジスト (=CTØ)
/ イノベーション担当執行役員
● 技術特性: 広く浅く時々深く
パソコンが関わる事なら大体何でも好き
3
たけうち ひでゆき @chimerast
データ可視化
データ可視化の例5
県ごとのコンビニ店舗数の可視化
データ可視化の必要性
● データドリブンな意思決定への需要の高まり
● 大きな(複雑なデータ)を素早く理解しなければならない
● データを人の目で知覚可能な形へと「可視化」する
● データビジュアライゼーションへの注目
6
最近データ可視化の流れ
ウェブブラウザの機能が増え表現力が上がってきた
ユーザの操作によるインタラクティブな表現の増加
いままでIE6,7,8がネックだった
報道にもデータ可視化の技術が使われるようになってきた
データジャーナリズム
報道機関各社にデータビジュアライズ専門の部署ができは
じめている
7
E2D3紹介
OSSプロジェクト「E2D3」
E2D3: Excel to D3.js http://e2d3.org/GitHub: https://github.com/e2d3/
Officeストア にて配信中
Excel2013以上 もしくは ブラウザのOffice365上で動作
30人ぐらいの人がゆるく関わっています
現在絶賛開発中
9
プロジェクトのミッション
全ての人にデータ可視化技術を
データ可視化を作り上げるのはとても大変！
見かけたものをちょっと使ってみたいなと思っても
特にノンプラグラマには絶対無理
エンジニアが作ったデータ可視化のテンプレートに
Excelからデータを流し込めると良いのでは？
10
デモ
ユースケース
営業・コンサルタント
データを地図等にマッピング
収集したデータをインタラクティブに可視化
Webニュース記者・編集者
データジャーナリズム
読者にデータを触らせて気づかせる
12
E2D3の直近の開発予定
データ可視化テンプレートを簡単に公開・検索できる機能
現在はe2d3-contribレポジトリに追加すると公開
任意のGitHubのレポジトリ等を配信可能に
可視化されたデータを共有・利用できる機能
FacebookやTwitter等に可視化したデータをシェア
JS/CSS/データを塊としてExportしブログ等に追加
13
2015年5月末までの目標
commiter: 30人
visualization: 100個
海外進出(?)
14
E2D3でデータ可視化開発
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
16
Excelが無くても開発出来ます
ブラウザとエディタとnode.jsさえあればOK
将来的にはブラウザだけで開発したい
ファイルを保存すると勝手にブラウザの再読込がされる
LiveReload機能付き！
CoffeeScript, React(JSX)でも直接かけます！
実はD3.js使わずthree.jsつかったりもできる(IE11以上要)
17
開発を始める前に
インストールが必要なもの
node.js 0.10.x (https://nodejs.org/)
(近々0.12.xに移行します)
node.jsのインストール
Mac: nodebrew
Windows: nodist
http://qiita.com/Kackey/items/b41b11bcf1c0b0d76149
18
E2D3の準備19
# プロジェクトのclonegit clone --recursive [email protected]:e2d3/e2d3.git
# プロジェクトディレクトリへの移動cd e2d3
# サブモジュールの設定git -C contrib checkout master
# 依存ライブラリのインストールnpm install
E2D3を起動してみる
起動したら
http://localhost:8000/index.html
にブラウザでアクセス
20
# プロジェクトの起動npm start
初めてのE2D3データ可視化開発
ディレクトリの中身
main.js: メイン可視化プログラム
data.csv: サンプルデータ
main.css(オプション): スタイルシート
README.md: 一覧で表示する説明文
21
# contribディレクトリへの移動cd contrib
# サンプルプログラムをコピーcp -r barchart-javascript mychart
main.jsの構造
1行目: おまじない(RequireJSで読み込むモジュール)INITIALIZATION: 一番初めとリサイズ時に呼ばれます
DATA_UPDATE: Excelでデータが更新される毎に呼ばれま
す
22
//# require=d3
<INITIALIZATION_BLOCK>
function update(data) { <DATA_UPDATE_BLOCK>}
チャートの出力先
root というグローバル変数に、DOMノードが設定されているの
でそこの中にチャートを描画してください
実際にはグローバル変数汚染はしてないですが簡易的な説明のために
グローバルとさせてください
23
var chart = d3.select(root).append('svg') .attr('width', root.clientWidth) .attr('height', root.clientHeight) .append('g') .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
function update(data)の引数について
e2d3/src/lib/coffee/e2d3model.coffeedata: ChartDataTable (≒ String[][])
2次元配列。Excelの選択範囲もしくはdata.csvが丸ごと
入っている。
data.transpose(): 転置(行列の入れ替え)data.toList(): ヘッダと値の配列
data.toMap(): ヘッダと値のマップ
data.toNested(): d3.jsのツリー構造データ
24
data.toList():ChartDataKeyValueList元データ(ChartDataTable):a,b,c,d1,2,3,45,6,7,8
返り値(toList()):[ { a:1, b:2, c:3, d:4 }, { a:5, b:6, c:7, d:8 }]
25
棒グラフ等の一般的なチャートで使います
data.toMap():ChartDataKeyValueMap元データ(ChartDataTable):_,a,b,c東京都,1,2,3大阪府,4,5,6
返り値(toMap()):{ 東京都: { a:1, b:2, c:3 }, 大阪府: { a:4, b:5, c:6 }}
26
地図等のキーのあるチャートで使います
E2D3でデータ可視化を作る際の注意
良くあるD3.jsのサンプルはデータの更新を考慮していない
既存のコードを流用する場合は、初期化ブロックの最初や、
update()の最初で、前のSVGを削除する必要があるかもしれ
ません
d3.select(root).selectAll('*').remove();
27
Excelで動作確認する
ちょっとめんどくさいです。
参考: http://apps-office.pita-ri.jp/install-document.html
マニフェストファイルは“e2d3/e2d3.xml”を使用し、
SourceLocationを適宜node.jsで立ち上げたサーバを指すよ
うに書き換えてください
最悪E2D3のメンバが動作確認を行い適宜修正します
28
Visual Studioで開発する
Microsoftの松崎さんがE2D3をVisual Studioで開発する方
法を公開してくれています。
http://blogs.msdn.
com/b/tsmatsuz/archive/2015/04/07/e2d3-excel-and-d3-
js-app.aspx
node.jsが必要ないのでこちらの方が場合によっては簡単かも
29
E2D3にコントリビュートする
GitHubのe2d3/e2d3-contribに対してPull Requestを送信
マージされるとユーザアプリ上に表示されます
よくわからなかったら、作ったチャートをディレクトリごと圧縮して
送ってください(送り先調整中)
e2d3-contribにマージされるチャートは、
Apache 2.0 ライセンスとします
よくわからなかったらTwitterで#e2d3をつけてつぶやく
30
提 供
全ての人にデータ可視化技術を
