D3.js from Excel

admin11 — Sat, 14 Dec 2013 07:37:39 +0000

前回、Excelデータのビジュアライズに、WebViewのバージョンの関係によりD3.jsでなくjqplotを使用しましたが、Selenium IDEを使うと、WebViewでなくWebブラウザを使用できるので、これならD3.jsでもと思い、トライしてみました。

このツールはWebアプリのテスト等に使うもので、ブラウザ操作を自動的にできるなどとても強力なツールです。また各種プログラムコードも出力してくれます。

selenium-vba

https://code.google.com/p/selenium-vba/

ここではVBAからseleniumアドインを組み込んだFirefoxをコントロールする方法でテストしました。これならVBAからFirefoxで表示されているページのJavaScriptを呼び出すことができます。

環境 : SeleniumWrapperSetup-1.0.16.0.exe, Firefox 23.0.1, Excel 2010 / Windows 7
Excel Visual Basic for Application -> ツール -> 参照設定で、SeleniumWrapper Type Library を追加

Private Sub CommandButton1_Click()
   Dim selenium As New SeleniumWrapper.WebDriver
   selenium.Start "firefox", "file:///C:\d3.html"
   selenium.Open "file:///C:\d3.html"
   For i = 1 To 20
       v1 = Sheets(1).Cells(i, 1).Value
       v2 = Sheets(1).Cells(i, 2).Value
       v3 = Sheets(1).Cells(i, 3).Value

       selenium.getEval "setData({'clm1':" + Str(v1) + ", 'clm2':" + Str(v2) + ", 'clm3':" + Str(v3) + "});"
   Next i
   selenium.getEval "plot();"
End Sub

D3.jsは以下のサンプルを使いました。

http://bl.ocks.org/mbostock/raw/7586334/

サンプルでは、csvからファイルを読み込むようになっていますが、これを以下のように変更しました。
d3.html抜粋

var cars = [];
function setData(d)
{
	cars.push(d);
}
function plot(){
  x.domain(dimensions = d3.keys(cars[0]).filter(function(d) {
    return d != "name" && (y[d] = d3.scale.linear()
        .domain(d3.extent(cars, function(p) { return +p[d]; }))
        .range([h, 0]));
  }));
 .....
}
.....

Firefoxにもアドインを入れておく必要があります。

これはなかなかいいかも。

jQueryPlot from Excel

admin11 — Sat, 07 Dec 2013 14:35:10 +0000

データビジュアライゼーション。最近とてもブームでもあり私自身も大変興味深い領域です。Excelデータをビジュアライゼーションするとき、どんな形が面白そうかと考えてみたところ、WebでJavaScriptライブラリという結論になりました。Webで表示させるためには、VSTOを使ってWindowsForm上のWebViewにhtmlファイルを読み込ませる方法にしました。もともと今大人気のD3.jsを使いたかったのですが、WebViewがIE7相当のため(Webサーバログで確認)動作しませんでした。対応しないメソッドがあったり、SVGを使うということが原因と思われます。(ちなみにQtのQWebViewでは表示できました。)しかしながら個人的にこのD3.jsを初めて知ったときは、jQueryが登場したときと同じくらい衝撃を受けました。ちょっとはまっています。
そこでD3.jsのかわりにIE7にも対応しているjQueryPlot(http://www.jqplot.com/)を使うことにしました。

前置きが長くなりましたが、ExcelシートにあるデータをWindowFormのボタンを押すとWebViewのグラフが更新されるデモをつくってみました。

データを変更(赤字部分)してボタン押下

環境 : VisualStudio 2010, Excel 2010 / Windows 7
ThisWorkbook.cs

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.Xml.Linq;
using Microsoft.Office.Tools.Excel;
using Microsoft.VisualStudio.Tools.Applications.Runtime;
using Excel = Microsoft.Office.Interop.Excel;
using Office = Microsoft.Office.Core;

namespace ExcelWorkbook_Web
{
    public partial class ThisWorkbook
    {
        private void ThisWorkbook_Startup(object sender, System.EventArgs e)
        {
            Form1 fm = new Form1();
            fm.Show();
        }
        public String getData()
        {
            String str = "[";

            for (int i = 1; i <= 7; i++)
            {
                str += "[";

                var o1 = Globals.Sheet1.Cells[i, 2].Value;
                var o2 = Globals.Sheet1.Cells[i, 3].Value;
                var o3 = Globals.Sheet1.Cells[i, 4].Value;

                str += o1.ToString() + "," + o2.ToString() + "," + o3.ToString();
                var o4 = Globals.Sheet1.Cells[i, 1].Value;
                str += ",'" + o4.ToString() + "'";
                str += "]";
                if (i != 7)
                {
                    str += ",";
                }
            }
            str += "]";
            return str;
        }

        private void ThisWorkbook_Shutdown(object sender, System.EventArgs e)
        {
        }

        #region VSTO デザイナーで生成されたコード
        private void InternalStartup()
        {
            this.Startup += new System.EventHandler(ThisWorkbook_Startup);
            this.Shutdown += new System.EventHandler(ThisWorkbook_Shutdown);
        }
        #endregion
    }
}

Form1.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace ExcelWorkbook_Web
{
    [System.Runtime.InteropServices.ComVisibleAttribute(true)]
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();

            webBrowser1.ObjectForScripting = this;
            webBrowser1.Navigate(new Uri("file:///C:/work/test.html"));

        }

        private void button1_Click(object sender, EventArgs e)
        {
            String str = Globals.ThisWorkbook.getData();
            object[] args = {str};
            webBrowser1.Document.InvokeScript("plot", args);
        }
    }
}

test.html

Excelシートのデータを変更してボタンを押すと、BubbleChart(というらしい)が変化する模様は、なかなかわかりやすいくて使いやすいと思いました。
いろいろと応用がききそうです。

crossframe » D3.js

D3.js from Excel

jQueryPlot from Excel