GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ

D3v3 E2D3

Excel上でD3.jsを使ったグラフを表示する「E2D3」を使ってオリジナルなグラフを表示してみた。

投稿日:2014年10月29日

※記事内の情報が古くなっています。


ファーストインプレッション!

E2D3 ver. 0.2 (Excel to D3) | MA【エム・エー】 by Mashup Awards

Excelでいつも作っているグラフをもっと恰好良くしたくないですか?でも,デザインソフトを自分で習得するには時間がかかりますし,グラフ作成をデザイナーに依頼にはお金がかかります.そこで我々は,ExcelからD3ライブラリーを簡単に呼び出せるOffice用アプリE2D3(Excel to D3)を開発しました.D3は2014年,世界で最も注目されているグラフィックライブラリーです.E2D3を使えば,D3の詳細な中身を理解する必要なく,簡単なExcel操作のみでビジュアルインパクトが強烈なグラフを作成できるようになります!

以前から注目していた「E2D3」がリリースされたそうなので使ってみました。

詳しい内容は以下の動画をご覧ください。

※注意
ほんの触りだけちょこっと弄ってみた状態で書いている記事なので、間違った内容を掲載している可能性があります。

インストールの方法

下記ページを参照のこと。現時点では手動でインストールする必要がありますがアプリストアに登録されれば、もっと簡単に導入することができるようです。
E2D3 インストール手順

オリジナルのグラフを表示

インストールすればサンプルのグラフを利用できるようになるのですが、自分でD3.jsを使ってグラフを表示したい方は以下ページに公開されているスライドに開発方法が記載されています。
E2D3 開発資料

なお、これ以降の内容は自分でD3.jsのコードを書いてオリジナルなグラフを表示させたいコントリビューター向けの情報です。一般の方が「E2D3」を使うのに下記のような作業を行う必要はありません。

やってみた

とりあえずシンプルに円グラフを表示してみました。

E2D3円グラフ

サンプルコード(未完)

まだちょっと、セルの値を変更した際にグラフのアップデートが上手くいっていないのですが、何となく雰囲気は伝わるかと思うので載せておきます。

なぜか、以下個所でshowUpdateが呼ばれない。 orz

やってみて分かったこと

実際にグラフを表示しているのはWebアプリです。いつの間にかExcelにはいわゆる「Web View」(iframeみたいなもの)機能が備わっていたらしく、その中でD3.jsを用いでグラフを表示しています。
Excel上でWebアプリを使用するのでマニフェストファイルによる承認が必要なんですね。
E2D3はExcelシートとWebアプリ間でデータの受け渡しを行うOffice APIを簡単に利用できるようにするライブラリとのこと。
まだ、ほんの少し触ってみただけなので、ちゃんと把握しているわけではないですが、これ多分D3.js以外にもいろいろ使えますね。

注意点

Excel上にWebアプリを読み込むわけですが、その際のエンジンはIEのエンジンを使っています。なので、インストールしているIEのバージョンに依存して動作する部分がありそうです。
確認していませんが、Windows7でIEのバージョンが8だとSVGが表示されないかも?

あとExcel上では開発者ツールが使えないのでデバッグが結構大変です。
今回はFire bugs liteを読み込んでみましたが、やはり取りこぼすエラーがあるようでした。

E2D3デバッグ

この辺、上手いやりかたを見つけたい。

総括

シートに登録された値をデータセットとして、Excel上にD3を使ってグラフを表示するのはなかなか新鮮な体験で楽しかったです。今はまだ、利用できるグラフの種類が限られていますが、今後グラフの種類が増えていくと実用的なアプリになりそうです。コントリビューターが作成したデータビジュアライゼーションを投稿できるアセットストア的なサービス展開などあると面白いかも。
個人的に可能性を感じるライブラリなので、しばらくいろいろ弄ってみたいと思います。

About Me

著者: 清水正行
所在地: 群馬県高崎市

群馬・東京間を行き来する出稼ぎエンジニア。GIS(地理情報システム)・データビジュアライゼーション・オープンデータなどについて書いてます。