E2D3の可視化テンプレートを作ってみる

E2D3のテンプレート開発方法ハンズオンの資料です。
随時更新していきます。

1. アジェンダ E2D3 って何？ E2D3 の可視化テンプレー トを作ってみる
2. E2D3 って何？ E2D3 基盤制作部 たけうち　 ひでゆき
3. OSS プロジェクト「E2D3」 E2D3: Excel to D3.js http://e2d3.org/ https://github.com/e2d3/ デー タ可視化のテンプレー トに Excel からデー タを流し込むことのできるソフトウェア 1. エンジニアがデー タ可視化テンプレー トを 作って共有する 2. エンドユー ザがそれにデー タを流し込み ブログやSNS で公開する
4. E2D3 の導入方法 1. Excel2013 もしくは ExcelOnline ( 無料) を立ち上げる 2. INSERT タブ -> Office Add-ins をクリック 3. STORE リンクをクリックした後、 検索ボックスで「E2D3」 を検索 4. E2D3 を選択して、「Trust It」 を押すと挿入される
5. デモ
6. E2D3 の 可視化テンプレー トを 作ってみる E2D3 基盤制作部 たけうち　 ひでゆき
7. E2D3 の 可視化テンプレー トを 作ってみる E2D3 基盤制作部 たけうち　 ひでゆき
8. このプレゼンの趣旨 E2D3 のデー タ可視化テンプレー トの開発を 一通りできるように、e2d3 コマンドの使い方と 作るときの注意点についてハンズオン形式で 説明します。
9. その他の資料 GitHub の 内の に 大体同じ内容の話が文章で書いてあります ( 英語/ 日本語)。 e2d3/e2d3 Wiki
10. テンプレー ト開発に必要なもの v0.12.x (for MacOSX) or (for Windows) を 使ってインストー ル Git Microsoft アカウントを作れば無料で使えます Node.js nodebrew nodist Google Chrome Microsoft Excel Online + お好きなテキストエディタ 例えば、Atom
11. 準備 e2d3 コマンドをnpm 経由でインストー ル $ n p m i n s t a l l - g e 2 d 3 e2d3-contrib レポジトリをクロー ン $ g i t c l o n e g i t @ g i t h u b . c o m : e 2 d 3 / e 2 d 3 - c o n t r i b . g i t
12. テンプレー ト開発環境の起動 e2d3‑contribレポジトリをclone してきた ディレクトリ内でe2d3コマンドを実行 e 2 d 3 - c o n t r i b $ e 2 d 3 [ E 2 D 3 ] P u b l i s h / U s e r s / c h i m e r a / S i t e s / e 2 d 3 - s e r v e r / e 2 d 3 / c o n t r i b [ E 2 D 3 ] W e b s e r v e r s t a r t e d a t h t t p : / / 0 . 0 . 0 . 0 : 8 0 0 0 [ E 2 D 3 ] W e b s e r v e r ( S S L ) s t a r t e d a t h t t p s : / / 0 . 0 . 0 . 0 : 8 4 4 3 実行するとブラウザが立ち上がり、 e2d3‑contrib内のチャー ト一覧が表示される。 表示されない場合は、 にアクセス。 http://localhost:8000/
13. 初めてのテンプレー ト作成 e2d3コマンドを実行した状態で、 1. e2d3‑contribディレクトリ内で barchart‑javascriptをコピー この時点でブラウザ内のチャー ト一覧にコピー した 名前で表示される 2. コピー したチャー ト内のmain.js ファイルを変更して 保存する 3. ブラウザが自動的に更新され変更されたチャー トが 表示される
14. 初めてのテンプレー トデバッグ e2d3コマンドを実行した状態で、 1. にブラウザでアクセスし、 自己認証SSL を許可する。 2. Excel Online を立ち上げ、Office ストアから E2D3 を起動する 3. E2D3 の画面を一度クリックし、Ctrl キー を5 回叩く 4. 右上に「Go into delegate mode」 と出るのでクリック https://localhost:8443/ この状態でロー カルのウェブサー バの内容が参照される ようになり、 作ったテンプレー トのExcel を使用したデ バッグができます。
15. E2D3 テンプレー トの構成要素 main.js デー タ可視化で初めに実行されるファイル main.css main.js の実行前に読み込まれるCSS ファイル thumbnail.png 一覧画面に表示されるサムネイル画像( 廃止予定) README.md 一覧画面で表示されるチャー トの説明
16. main.js の基本構造 / / # r e q u i r e = d 3 初期化ブロック: ここの位置で初期化を行う f u n c t i o n u p d a t e ( d a t a ) { データ更新ブロック: E x c e l でデータが更新される毎にd a t a にセルのデータが入って呼び出される }
17. 暗黙の変数& 関数 root チャー トを描画するべき先のHTML 要素 d3 やjQuery でbody要素をselect したりせずこれを 使う function reload() topojson 使用時等、 非同期にデー タ以外のファイル を読んだ後、update()を再度呼び出したいとき に呼び出す
18. 外部ライブラリのロー ド ファイルをmain.js と同じ所に起き、 main.js の一行目の / / # r e q u i r e = d 3 の所に、 カンマ区切りで".js" を取り除いたファイル名を 記述してください。 / / # r e q u i r e = d 3 , j q u e r y , t o p o j s o n 等になります。 ただし、 ライブラリはAMD 形式という記述で書かれてい る必要があります。 ( 対応していない場合はご相談を)
19. function reload()の使い方 japanmap‑javascriptを参照 初期化処理 d 3 . j s o n ( ' j a p a n m a p . j s o n ' , f u n c t i o n ( e r r o r , j s o n ) { t o p o j s o n を使ってj s o n として読み込んだ地図を描画 r e l o a d ( ) ; / / u p d a t e ( ) をデータと共に明示的に呼び出す } ) ; f u n c t i o n u p d a t e ( d a t a ) { 一番初めに呼び出された時には、上記j a p a n m a p . j s o n の読み込みが 終わっていない場合があるのに注意
20. function update(data)の data 変数について dataは文字列の二次元配列です。 data[0][0]で1 行1 列目のセルの内容が文字列で 返ります。 これをD3.js 等で扱いやすいように転置したり、 リスト形式、 マップ形式、 ネスト形式に変換する メソッドが用意されています。
21. data.transpose() 行列を転置します。 A B C D ↓ A C B D
22. data.toList(options) 行列をリスト形式にします。 A B C 1 2 3 4 5 6 ↓ [ { A : 1 , B : 2 , C : 3 } , { A : 4 , B : 5 , C : 6 } , ] 一般的な順序のあるチャー トで使います。
23. data.toList()の返り値 var list = data.toList() list.header ヘッダが文字の配列で返ります。 特に何も指定しなければ一行目です。
24. data.toList(options) options.header 指定すると、 一列目を項目名として使用せず、 指定された配列を使用します options.typed true を指定すると文字列を数値や日付に変換して 返します。 大体の場合、 指定した方が良いです。
25. data.toMap(options) 行列をマップ形式にします。 A B C a 1 2 3 b 4 5 6 ↓ { a : { A : 1 , B : 2 , C : 3 } , b : { A : 4 , B : 5 , C : 6 } , } 主に都道府県マッピングとかで使います。
26. data.toMap()の返り値 var map = data.toList() map.header ヘッダが文字の配列で返ります。 特に何も指定しなければ一行目です。 map.keys デー タのキー が配列で返ります。 特に何も指定しなければ一列目です。
27. data.toMap(options) options.header 指定すると、 一列目を項目名として使用せず、 指定された配列を使用します options.typed true を指定すると文字列を数値や日付に変換して 返します。 大体の場合、 指定した方が良いです。
28. チャー トを作る際に気をつけて 欲しいこと 最終的にはWindows のExcel2013 で確認して欲しい 幅や高さを固定で作らない 可能な限りroot.{clientWidth, clientHeight}を元に計算する update()でデー タが更新された際アニメー ション すると嬉しい
29. 自作のテンプレー トを E2D3 に追加する GitHub 上でPullRequest を送っていただき、 それが承認されると公開されます。 細かいやり方については、GitHub 上のWiki の 「 自作のテンプレー トをE2D3 に追加する」 の項に 追加されているのでご覧ください。
30. 何か分からないことがあれば たけうちまでお気軽にご相談ください。 @chimerast
31. 今後の開発者向け拡張予定 gist 対応 e2d3‑contribのclone を不要にする ( 本当はこの説明会までに間に合わせたかった)
32. 今後のエンドユー ザ向け拡張予定 E2D3 の状態のファイル保存機能 UI/UX 全面改定 簡易的なチャー トのカスタマイズ ブラウザ上での直接入力& 公開