Download as PDF, PPTX
![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](https://image.slidesharecdn.com/e2d320150411-150416102642-conversion-gate02/75/E2D3-24-2048.jpg)
![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
棒グラフ等の
一般的なチャートで
使います](https://image.slidesharecdn.com/e2d320150411-150416102642-conversion-gate02/75/E2D3-25-2048.jpg)
オープンソースプロジェクト E2D3のご紹介
- 1.
- 2.
- 3. 自己紹介 ● 株式会社ユーザベース ● チーフテクノロジスト(=CTØ) / イノベーション担当執行役員 ● 技術特性: 広く浅く時々深く パソコンが関わる事なら大体何でも好き 3 たけうち ひでゆき @chimerast
- 4.
- 5.
- 6. データ可視化の必要性 ● データドリブンな意思決定への需要の高まり ● 大きな(複雑なデータ)を素早く理解しなければならない ●データを人の目で知覚可能な形へと「可視化」する ● データビジュアライゼーションへの注目 6
- 7.
- 8.
- 9. OSSプロジェクト「E2D3」 E2D3: Excel toD3.js http://e2d3.org/ GitHub: https://github.com/e2d3/ Officeストア にて配信中 Excel2013以上 もしくは ブラウザのOffice365上で動作 30人ぐらいの人がゆるく関わっています 現在絶賛開発中 9
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 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.
- 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
- 20.
- 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 地図等の キーのあるチャートで 使います
- 27.
- 28.
- 29.
- 30. E2D3にコントリビュートする GitHubのe2d3/e2d3-contribに対してPull Requestを送信 マージされるとユーザアプリ上に表示されます よくわからなかったら、作ったチャートをディレクトリごと圧縮して 送ってください(送り先調整中) e2d3-contribにマージされるチャートは、 Apache 2.0ライセンスとします よくわからなかったらTwitterで#e2d3をつけてつぶやく 30
- 31.