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

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

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

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円グラフ

サンプルコード(未完)

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

//サンプルデータ
var sample_data = [ 
    [ "label",  "size" ],
    [ "test",  3812 ],
    [ "hoge", 6714 ],
    [ "Hello",743 ],
    [ "World",  3534 ],
    [ "GUNMA", 5731 ]
];

var colorScale = d3.scale.category10();

//on click
var bindSetting = { dimension: "2d" }; //jsonデータ構造
var setBindId = $("#test_data").attr("data-bind-source"); //バインドID

//右上のリセットボタンおよび、トップへ戻るボタンの処理
$(".reset_data").on("click", function () {
        e2d3.releaseBindDataById(
        { id: setBindId, isDataDelete: 1 },
        function () { return; }
    );
});
$(".reset_and_index").on("click", function () {
    e2d3.releaseBindDataById(
        { id: setBindId, isDataDelete: 1 },
        function () {
            location.href("index.html");
        });
});
//サンプルデータのセット
$("#set_sample_data").on("click", function () {
    //サンプルデータをセルにセット
    e2d3.json2Excel(sample_data,
        function (result) {
            //コールバックでバインドに登録
            e2d3.setBindData(
                { id: setBindId },
                    function (binding) {
                        //さらにコールバックで不要な部分を非表示（hideはBootstrapの標準クラス）
                        $(".show_hide").addClass("hide");
                        //バインドされたデータをJSONで取得し、コールバックでShowを実行
                        e2d3.bind2Json(setBindId, bindSetting, show);
                        //値変更時の処理を登録。この場合はdataUpdateをコールバックに指定
                        e2d3.addChangeEvent(binding, dataUpdate);
                    });
        });
});
//手動でデータを選択する場合の処理
$(".jrockets-data-binder").on("click", function () {
    e2d3.setBindData(
        { id: setBindId, is_prompt: 1 }
        , function (binding) {
            e2d3.bind2Json(setBindId, bindSetting, show);
            e2d3.addChangeEvent(binding, dataUpdate);
        });
});
//手動でデータを選択し、バインドした場合に、Showを実行するためのアクションを定義
$("#jrockets-visualize").on("click", function () {
    $(".show_hide").addClass("hide");
    e2d3.bind2Json(setBindId, bindSetting, show);
});


function dataUpdate(binding) {
    console.log("dataUpdate => ", binding); // binding == false?
    e2d3.bind2Json(binding.id, bindSetting, showUpdate); // showUpdateが実行されない。
}

//円グラフ描画
function show(data){
    console.log("show", data);
    var w=860,h=500, r= 200;
    
    d3.select(".pie").remove();
    
    var svg = d3.select("svg.chart")
        .append("g")
        .attr("class", "pie")
    
    var arcsGroup = svg
        .data([data])   //pieで変換するために要素１の配列としてデータを渡す
        .append("svg:g")
        .attr("transform", "translate(" + Math.floor(w/2) + "," + Math.floor(h/2) + ")")

    var pie = d3.layout.pie().value(function(d) { return d.size; });        
    var arc = d3.svg.arc().outerRadius(r).innerRadius(Math.floor(r/2));

    var sliceGroup = arcsGroup.selectAll("g.slice")     
        .data(pie)
        .enter()
        .append("svg:g")
        .attr("class", "slice");
       
    var slicePaths = sliceGroup.append("svg:path")
        .attr({
            fill: function(d, i){ return colorScale(i); },
            stroke:"white",
            d: arc
        });
        
    //テキスト表示
     var textStyle = {
         "transform":function(d) {                  
                d.innerRadius = 0;
                d.outerRadius = r;
                return "translate(" + arc.centroid(d) + ")";       
           },
         fill:"white",
         "text-anchor":"middle"
     }
     var text =  sliceGroup.append("svg:text")
     .attr(textStyle)
    .attr("text-anchor", "middle")
    .text(function(d){ return d.data.label }); 
        
}

function showUpdate(data){
    console.log("showUpdate", data);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

//サンプルデータ

var sample_data = [

[ "label", "size" ],

[ "test", 3812 ],

[ "hoge", 6714 ],

[ "Hello",743 ],

[ "World", 3534 ],

[ "GUNMA", 5731 ]

];

var colorScale = d3.scale.category10();

//on click

var bindSetting = { dimension: "2d" }; //jsonデータ構造

var setBindId = $("#test_data").attr("data-bind-source"); //バインドID

//右上のリセットボタンおよび、トップへ戻るボタンの処理

$(".reset_data").on("click", function () {

e2d3.releaseBindDataById(

{ id: setBindId, isDataDelete: 1 },

function () { return; }

);

});

$(".reset_and_index").on("click", function () {

e2d3.releaseBindDataById(

{ id: setBindId, isDataDelete: 1 },

function () {

location.href("index.html");

});

//サンプルデータのセット

$("#set_sample_data").on("click", function () {

//サンプルデータをセルにセット

e2d3.json2Excel(sample_data,

function (result) {

//コールバックでバインドに登録

e2d3.setBindData(

{ id: setBindId },

function (binding) {

//さらにコールバックで不要な部分を非表示（hideはBootstrapの標準クラス）

$(".show_hide").addClass("hide");

//バインドされたデータをJSONで取得し、コールバックでShowを実行

e2d3.bind2Json(setBindId, bindSetting, show);

//値変更時の処理を登録。この場合はdataUpdateをコールバックに指定

e2d3.addChangeEvent(binding, dataUpdate);

});

//手動でデータを選択する場合の処理

$(".jrockets-data-binder").on("click", function () {

e2d3.setBindData(

{ id: setBindId, is_prompt: 1 }

, function (binding) {

e2d3.bind2Json(setBindId, bindSetting, show);

e2d3.addChangeEvent(binding, dataUpdate);

});

//手動でデータを選択し、バインドした場合に、Showを実行するためのアクションを定義

$("#jrockets-visualize").on("click", function () {

$(".show_hide").addClass("hide");

e2d3.bind2Json(setBindId, bindSetting, show);

});

function dataUpdate(binding) {

console.log("dataUpdate => ", binding); // binding == false?

e2d3.bind2Json(binding.id, bindSetting, showUpdate); // showUpdateが実行されない。

}

//円グラフ描画

function show(data){

console.log("show", data);

var w=860,h=500, r= 200;

d3.select(".pie").remove();

var svg = d3.select("svg.chart")

.append("g")

.attr("class", "pie")

var arcsGroup = svg

.data([data]) //pieで変換するために要素１の配列としてデータを渡す

.append("svg:g")

.attr("transform", "translate(" + Math.floor(w/2) + "," + Math.floor(h/2) + ")")

var pie = d3.layout.pie().value(function(d) { return d.size; });

var arc = d3.svg.arc().outerRadius(r).innerRadius(Math.floor(r/2));

var sliceGroup = arcsGroup.selectAll("g.slice")

.data(pie)

.enter()

.append("svg:g")

.attr("class", "slice");

var slicePaths = sliceGroup.append("svg:path")

.attr({

fill: function(d, i){ return colorScale(i); },

stroke:"white",

d: arc

});

//テキスト表示

var textStyle = {

"transform":function(d) {

d.innerRadius = 0;

d.outerRadius = r;

return "translate(" + arc.centroid(d) + ")";

fill:"white",

"text-anchor":"middle"

}

var text = sliceGroup.append("svg:text")

.attr(textStyle)

.attr("text-anchor", "middle")

.text(function(d){ return d.data.label });

}

function showUpdate(data){

console.log("showUpdate", data);

}

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

e2d3.bind2Json(binding.id, bindSetting, showUpdate);

1	e2d3.bind2Json(binding.id, bindSetting, showUpdate);

やってみて分かったこと

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

注意点

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

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

E2D3デバッグ

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

総括

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

インストールの方法

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

やってみた

サンプルコード(未完)

やってみて分かったこと

注意点

総括

投稿者: shimizu