English version is here. (The following post is written in Japanese.)

Excel 利用者にとっての E2D3

こんにちは。

d3.js と言うと、プログラマーには魅力的かもしれませんが、一般の人にとっては縁遠い世界かもしれません。
ありがちな棒グラフ、折れ線、円グラフ、あとはそれらが立体になったものなどを想像すると思いますが、d3.js は DOM と svg を柔軟に操作して質の異なる視覚表現 (Visualization) を提供できます。
米国でも、あの New York Times などが d3 を積極的に活用していて、日本でも 2014 年の衆議院選挙の機には、年度ごとの支持政党の推移を表現した動く棒グラフ (E2D3 で作成) がメディア (朝日新聞デジタル) で紹介されました。(記事「衆院選を動くグラフに – 激増する無効・棄権票」)

E2D3 では、Excel を使うことで、プログラムが書けない人にも、こうした高度な表現の利用を可能にします。
Excel 2013 をお持ちの方は、リボンの [挿入] – [個人用アプリ] から「E2D3」を検索して挿入してみてください。データを編集すると表現も変更され (行や列の挿入も可能)、完成したら [Share Chart] ボタンで Web ページに張り付けることが可能です。

現在、統一地方選挙の時期ですが、今週末 (04/11) は、マニフェスト スイッチ プロジェクトと E2D3 がコラボした政策可視化のためのハッカソン「Political Data Visualization Hackathon Vol.1 ～E2D3とマニフェストスイッチで新しい政治の見せ方を考えよう！～」も予定されていますので、興味ある方は是非ご参加ください。

プログラマーにとっての E2D3 ～ 自分好みのグラフを作る

もう1つの特徴は、この E2D3 自体がコミュニティによりオープンに構築されているという点です。

E2D3 自体もオープン ソース プロジェクトですが、追加の表現 (グラフ) が必要な場合は、Github への Fork と Pull Request によって、JavaScirpt を使った表現 (グラフ) をいつでもリクエストできます。
JavaScript が書ける方は、是非、皆さんが必要とする表現を登録してみてください。(多くの Excel 利用者が、その表現を使用するかもしれません。)

新しい表現の開発 (構築)

Mac ユーザーの方は、E2D3 公式ブログ「E2D3にグラフをcommitする(Mac)」を参照してください。
Excel Online (Web 版 Excel) でも動作しますので、Manifest を Office 365 の App catalog に登録して、Browser (Chrome など) の dev tool を使った開発・デバッグが可能です。

Windows 環境をお持ちの方は、そうです、Visual Studio Community (無償) を使って迅速に開発できます。
以下に、手順を簡単に紹介します。

環境準備

まず、Windows 環境に以下を準備してください。
環境準備が大変な方は、Azure 上に Visual Studio Community の VM イメージがありますので、こちらを使って構いません。(英語版ですが、まったく問題ありません。)

• Excel 2013 (Office 365 試用版でも OK)
• Visual Studio Community (Free)
• Office Developer Tools for Visual Studio 2013 Update (Free)

Office Developer Tools for Visual Studio 2013 Update は最新のものを使用してください。(執筆現時点では、November 2014 Update を使用。)

E2D3 で動く d3 グラフの作成

E2D3 のソース は Node.js (gulp, coffee 等使用) で書かれています。Visual Studio でも Node.js のプロジェクトを扱えますが (Node.js Tools for Visual Studio を使用します)、残念ながら、Visual Studio の Office Add-ins (Office アドイン, 旧 App for Office) のプロジェクトでは、Web プロジェクトとして Node.js のプロジェクトを扱えません。
そこで、Visual Studio による開発用の E2D3 のソース (E2D3Contrib.zip) が提供されていますので、今回は、これをダウンロードして使用します。(Visual Studio 2013 のプロジェクトです。)

プロジェクトをダウンロードして Visual Studio を使って開くと、Web プロジェクトに contrib というフォルダーがあります。新しい表現 (グラフ) は、ここにサブフォルダーを掘って作成します。
実装するものは、処理本体 (main.js)、サンプル データ (data.csv)、サムネイルのアイコン (thumbnail.png) のみです。(Web Essentials 2013 をインストールして CoffeeScript で記述しても構いません。)

例えば、contrib の下に「sample」フォルダーを作成し、下記の data.csv, main.js を配置してみましょう。

data.csv

"item","value""A","101""B","519""C","268""D","285""E","462""F","323"

main.js

//# require=d3/// <reference path="http://d3js.org/d3.v3.min.js" />var margin = { top: 20, right: 30, bottom: 30, left: 40 };var height = root.clientHeight - margin.top - margin.bottom;var width = root.clientWidth - margin.right - margin.left;// append svg graphicsvar chart = d3.select(root).append('svg')  .attr('width', root.clientWidth)  .attr('height', root.clientHeight)  .append('g')  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');function update(data) {  var jsonData = csv2json(data);  // setup d3 scale  var xScale = d3.scale.ordinal()    .domain(jsonData.map(function (d) { return d.item; }))    .rangeRoundBands([0, width], 0.1);  var yMax = d3.max(jsonData, function (d) { return parseInt(d['value'], 10) + 1 });  var yScale = d3.scale.linear()    .domain([0, yMax])    .range([height, 0]);  // remove exsisting axis  chart.selectAll('.axis').remove();  // draw x axis  var xAxis = d3.svg.axis()    .scale(xScale)    .orient('bottom');  chart    .append('g')    .attr('class', 'x axis')    .attr('transform', 'translate(0,' + (height - 1) + ')')    .call(xAxis);  // draw y axis  var yAxis = d3.svg.axis()    .scale(yScale)    .orient('left');  chart    .append('g')    .attr('class', 'y axis')    .call(yAxis);  // draw bar  var barSetup = function (selection) {    selection      .attr('class', 'bar')      .attr('fill', '#0f0')      .attr('width', 10)      .attr('x', function (d) {        return xScale(d['item']);      })      .attr('y', function (d) {        return yScale(d['value']);      })      .attr('height', function (d) {        return height - yScale(d['value']);      })  };  chart    .selectAll('.bar') // select all bar    .data(jsonData)    // set data    .call(barSetup)    // redraw existing data using new scale    .enter()           // enter to new data    .append('rect')    // insert new bar    .call(barSetup)    // draw new bar    .exit()            // exit from data    .remove();}// create d3-style json from csv-style 2 dimension array//// [{"item", "value"},//  {"A", "101"},//  {"B", "519"}, ...]// -->// [{"item" : "A", "value" : "101"},//  {"item" : "B", "value" : "519"}...]//function csv2json(csv) {  var headers = [];  for (var h = 0; h < csv[0].length; h++) {    headers.push(csv[0][h]);  }  var results = [];  for (var i = 1; i < csv.length; i++) {    var row = {};    for (var j = 0; j < headers.length; j++) {      row[headers[j]] = csv[i][j];    }    results.push(row);  }  return results;}

E2D3 で実装する関数は、上記の通り update() のみです。
ここではわかりやすく、単純な棒グラフを d3 で描画していますが、他のフォルダーに入っているサンプルを参考に、いろいろと動きを付けるなどして遊んでみてください。(d3 の詳細はここでは述べませんが、E2D3 ハッカソンの大曽根さんのスライド や、E2D3 の制作者の 1 人である竹内先生の Schoo の授業「どんなデータでもキレイに魅せる！ ～ HTML5/JavaScriptでグラフを描画する今どき手法」が参考になります。)

main.js の 1 行目の //# require=… では、requireJS で読み込む追加のライブラリーを指定できます。
また、2 行目の /// <reference path=… /> は、Visual Studio の Intellisense (コード補完) を使うための設定です。(こちら を参照してください。)

最後に index.html に、この sample へのリンクを追加すると、動作確認できます。(本物では動的に読み込むので、この作業は不要です。)
F5 を押してデバッグ実行すると Excel が起動し、下図の通り、CSV のデータにあわせて棒グラフが表示されます。

再描画にも対応していますので、Excel 上でデータを変更したり、行を増やした場合も、ちゃんと再描画されます。(領域を変更した場合は、マウスで領域を選択して [Link Data] ボタンを押します。)

なお、requireJS で読み込んでいるためだと思われますが、ブレークポイントで止めることはできないので、その点だけ注意してください。(console 出力などを使用してください。エラーの際のスタックトレース等は問題なく表示されます。)
それでも、変更しては F5、変更しては F5 で、すぐに動作が見れるので、各段に早く開発できます。(また、IE、Chrome でデバッグ実行できるので、この場合はブラウザーの開発ツールが使えます。)

参考情報 :

オープンソースプロジェクト E2D3のご紹介 (たけうち ひでゆき)
https://docs.google.com/presentation/d/1qVoaTueVDAZn9lzTE5E4K6Q2Dbim6HhDotsmaeXIBcQ/edit#slide=id.g2fe4cf2ad_0_114

※ 変更履歴 :

2015/04/10  英語の投稿は別投稿として分離

2015/08/03  [Share Chart] ボタンに関する記述を追加