Recomendados
Recomendados
Más contenido relacionado
Destacado
Destacado (18)
Similar a オープンソースプロジェクト E2D3のご紹介
Similar a オープンソースプロジェクト E2D3のご紹介 (20)
Más de Hideyuki Takeuchi
オープンソースプロジェクト E2D3のご紹介
- 3. 自己紹介 ● 株式会社ユーザベース ● チーフテクノロジスト (=CTØ) / イノベーション担当執行役員 ● 技術特性: 広く浅く時々深く パソコンが関わる事なら大体何でも好き 3 たけうち ひでゆき @chimerast
- 4. データ可視化
- 6. データ可視化の必要性 ● データドリブンな意思決定への需要の高まり ● 大きな(複雑なデータ)を素早く理解しなければならない ● データを人の目で知覚可能な形へと「可視化」する ● データビジュアライゼーションへの注目 6
- 8. E2D3紹介
- 9. OSSプロジェクト「E2D3」 E2D3: Excel to D3.js http://e2d3.org/ GitHub: https://github.com/e2d3/ Officeストア にて配信中 Excel2013以上 もしくは ブラウザのOffice365上で動作 30人ぐらいの人がゆるく関わっています 現在絶賛開発中 9
- 11. デモ
- 12. ユースケース 営業・コンサルタント データを地図等にマッピング 収集したデータをインタラクティブに可視化 Webニュース記者・編集者 データジャーナリズム 読者にデータを触らせて気づかせる 12
- 15. E2D3でデータ可視化開発
- 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
- 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. E2D3の準備 19 # プロジェクトのclone git clone --recursive git@github.com:e2d3/e2d3.git # プロジェクトディレクトリへの移動 cd e2d3 # サブモジュールの設定 git -C contrib checkout master # 依存ライブラリのインストール npm install
- 21. 初めてのE2D3データ可視化開発 ディレクトリの中身 main.js: メイン可視化プログラム data.csv: サンプルデータ main.css(オプション): スタイルシート README.md: 一覧で表示する説明文 21 # contribディレクトリへの移動 cd contrib # サンプルプログラムをコピー cp -r barchart-javascript mychart
- 22. main.jsの構造 1行目: おまじない(RequireJSで読み込むモジュール) INITIALIZATION: 一番初めとリサイズ時に呼ばれます DATA_UPDATE: Excelでデータが更新される毎に呼ばれま す 22 //# require=d3 <INITIALIZATION_BLOCK> function update(data) { <DATA_UPDATE_BLOCK> }
- 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. 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. 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. 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 地図等の キーのあるチャートで 使います
- 30. E2D3にコントリビュートする GitHubのe2d3/e2d3-contribに対してPull Requestを送信 マージされるとユーザアプリ上に表示されます よくわからなかったら、作ったチャートをディレクトリごと圧縮して 送ってください(送り先調整中) e2d3-contribにマージされるチャートは、 Apache 2.0 ライセンスとします よくわからなかったらTwitterで#e2d3をつけてつぶやく 30