Successfully reported this slideshow.

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

10

Share

1 of 31
1 of 31

More Related Content

オープンソースプロジェクト 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. 提 供 全ての人にデータ可視化技術を

×