Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,573 views

Published on

Published in: Data & Analytics
  • Be the first to comment

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

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

×