Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Hideyuki Takeuchi

September 06, 2015
Tweet

More Decks by Hideyuki Takeuchi

Other Decks in Programming

Transcript

  1. OSS プロジェクト「E2D3」 E2D3: Excel to D3.js http://e2d3.org/ https://github.com/e2d3/ デー タ可視化のテンプレー

    トに Excel からデー タを流し込むことのできるソフトウェア 1. エンジニアがデー タ可視化テンプレー トを 作って共有する 2. エンドユー ザがそれにデー タを流し込み ブログやSNS で公開する
  2. E2D3 の導入方法 1. Excel2013 もしくは ExcelOnline ( 無料) を立ち上げる 2.

    INSERT タブ -> Office Add-ins をクリック 3. STORE リンクをクリックした後、 検索ボックスで「E2D3」 を検索 4. E2D3 を選択して、「Trust It」 を押すと挿入される
  3. テンプレー ト開発に必要なもの v0.12.x (for MacOSX) or (for Windows) を 使ってインストー

    ル Git Microsoft アカウントを作れば無料で使えます Node.js nodebrew nodist Google Chrome Microsoft Excel Online + お好きなテキストエディタ 例えば、Atom
  4. 準備 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
  5. テンプレー ト開発環境の起動 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/
  6. 初めてのテンプレー ト作成 e2d3コマンドを実行した状態で、 1. e2d3‑contribディレクトリ内で barchart‑javascriptをコピー この時点でブラウザ内のチャー ト一覧にコピー した 名前で表示される

    2. コピー したチャー ト内のmain.js ファイルを変更して 保存する 3. ブラウザが自動的に更新され変更されたチャー トが 表示される
  7. 初めてのテンプレー トデバッグ e2d3コマンドを実行した状態で、 1. にブラウザでアクセスし、 自己認証SSL を許可する。 2. Excel Online

    を立ち上げ、Office ストアから E2D3 を起動する 3. E2D3 の画面を一度クリックし、Ctrl キー を5 回叩く 4. 右上に「Go into delegate mode」 と出るのでクリック https://localhost:8443/ この状態でロー カルのウェブサー バの内容が参照される ようになり、 作ったテンプレー トのExcel を使用したデ バッグができます。
  8. E2D3 テンプレー トの構成要素 main.js デー タ可視化で初めに実行されるファイル main.css main.js の実行前に読み込まれるCSS ファイル

    thumbnail.png 一覧画面に表示されるサムネイル画像( 廃止予定) README.md 一覧画面で表示されるチャー トの説明
  9. 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 にセルのデータが入って呼び出される }
  10. 暗黙の変数& 関数 root チャー トを描画するべき先のHTML 要素 d3 やjQuery でbody要素をselect したりせずこれを

    使う function reload() topojson 使用時等、 非同期にデー タ以外のファイル を読んだ後、update()を再度呼び出したいとき に呼び出す
  11. 外部ライブラリのロー ド ファイルを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 形式という記述で書かれてい る必要があります。 ( 対応していない場合はご相談を)
  12. 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 の読み込みが 終わっていない場合があるのに注意
  13. function update(data)の data 変数について dataは文字列の二次元配列です。 data[0][0]で1 行1 列目のセルの内容が文字列で 返ります。 これをD3.js

    等で扱いやすいように転置したり、 リスト形式、 マップ形式、 ネスト形式に変換する メソッドが用意されています。
  14. data.toList(options) 行列をリスト形式にします。 A B C 1 2 3 4 5

    6 ↓ [ { A : 1 , B : 2 , C : 3 } , { A : 4 , B : 5 , C : 6 } , ] 一般的な順序のあるチャー トで使います。
  15. 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 } , } 主に都道府県マッピングとかで使います。