Apache Hadoop と Dojo による経済的なビジネス・インテリジェンス: 第 2 回 Dojo ツールキットを使用して、印象的でインタラクティブなレポートを作成する

Dojo のグラフを利用する

自分のビジネスを理解することは常に重要なことです。企業に理想通りのアジリティー (俊敏性) があったとしても、進むべき正しい方向性を知らなければ、目を閉じたまま車を運転しているのと同じことです。ビジネス・インテリジェンス・ソリューションには法外なコストがかかるだけでなく、ソリューションのシステムで処理できるようにデータを改良しなければならないこともよくあります。けれどもオープンソースの技術が、独自のビジネス・インテリジェンス・レポートを今までになく簡単に作成できるようにします。

2回連載の第 2 回目となるこの記事では、Apache Hadoop で作成したビジネス・インテリジェンス・データを取り込み、Dojo ツールキットを使って見た目に印象的でインタラクティブなレポートに仕上げる方法を学びます。

Michael Galpin, Software Architect, eBay

Michael Galpin's photoMichael Galpin は eBay のアーキテクトであり、developerWorks に頻繁に寄稿しています。彼は JavaOne、EclipseCon、AjaxWorld など、さまざまな技術カンファレンスで講演を行っています。彼が次に取り組もうとしていることを知るには、Twitter で @michaelg をフォローしてください。



2010年 8月 31日

前提条件

この記事では、連載の第 1 回で Apache Hadoop を使用して作成したデータを使用します。今回の記事で焦点とするのは、Dojo ツールキット (この記事ではバージョン 1.4 を使用しました) の使い方です。サンプル・アプリケーションでは、Google の Ajax API を使用して、この記事で使用する Web ページに Dojo をダウンロードするので (「参考文献」を参照)、Dojo を別途ダウンロードする必要はありません。スキルに関して主に必要になるのは JavaScript の経験です。記事で使用するツールへのリンクは、「参考文献」に記載されています。

Dojo を使ったグラフによるレポート

この連載の第 1 回では、Apache Hadoop を使って大量のデータを高速処理する方法を説明しました。サンプル・アプリケーションで Hadoop を使用して、Apache Web サーバー・アクセス・ログを処理し、これらのログを、Web サイトのユーザーがどの Web ブラウザーを使ってサイトにアクセスしているかを伝えるビジネス・インテリジェンス・データに変換しました。この過程において、Hadoop を使って行った有益な作業の 1 つは、このデータを JSON フォーマットにしたことです。JSON フォーマットにしたのは、最終的にはこのビジネス・インテリジェンス・データを使用してグラフィカル・レポートを生成する Web アプリケーションを作成する予定だからです。リスト 1 に、この記事で使用するサンプル・データを記載します。

リスト 1. ブラウザー使用状況に関するサンプル・データ
[
    {"month" : "January 2010", "data": 
        {"IE8":5339680,"IPHONE":176397,"SAFARI":1161063,
        "FF35":5334121,"OTHER":1697189,"IE6":2355910,"OPERA":293024,
        "IE7":3448568,"FF3":1425939,"CHROME":1381381}},
    {"month" : "February 2010", "data": 
        {"IE8":4420267,"IPHONE":122378,"SAFARI":937765,
        "FF35":4904831,"OTHER":1249727,"IE6":1824138,"OPERA":261245,
        "IE7":2548741,"FF3":848517,"CHROME":1122684}},
    {"month" : "March 2010", "data" : 
        {"IE8":4832154,"IPHONE":124723,"SAFARI":1004835,
        "FF35":5240639,"OTHER":1443493,"IE6":1782140,"OPERA":288338,
        "IE7":2705560,"FF3":728227,"CHROME":1250771}},
    {"month" : "April 2010", "data" : 
        {"IE8":6014148,"IPHONE":153317,"SAFARI":1184909,
        "FF35":6355369,"IE6":2023596,"OTHER":1701331,"OPERA":336320,
        "IE7":3083772,"FF3":794613,"CHROME":1895022}},
    {"month" :"May 2010", "data" : 
        {"IE8":3985522,"IPHONE":107109,"SAFARI":826693,
        "FF35":4443157,"OTHER":1350928,"IE6":1169420,"OPERA":230201,
        "IE7":2032111,"FF3":471397,"CHROME":1358771}},
    {"month" :"June 2010", "data" : 
        {"IE8":4944664,"IPHONE":143594,"SAFARI":597916,
        "FF35":5396690,"OTHER":1740354,"IE6":1367462,"OPERA":264916,
        "IE7":2318786,"FF3":511660,"CHROME":1594828}}
]

上記のデータは、連載第 1 回で開発した Hadoop のコードによって生成することができます。今回のサンプル・アプリケーションではこのデータを Web ページに直接組み込みますが、Ajax を使用してダウンロードできるように、別のファイルにデータを保存するのも簡単です。リスト 1 からわかるように、データには JSON で表現された 6 ヶ月分のブラウザー使用状況の統計が含まれています。このようなデータであれば、Web アプリケーションがレポートを作成するために簡単に使用することができます。

このデータからレポートを作成するために利用できる優れたフレームワークとライブラリーは、サーバー・サイドにも、クライアント・サイドにも数多くあります。レポートを極めてインタラクティブなものにするためにはクライアント・サイドのソリューションが必要です。そしてその目的にまさにぴったりなのが、Dojo ツールキットです。Dojo ツールキットには 2 次元グラフと 3 次元グラフの両方がありますが、このサンプル・アプリケーションでは 2 次元グラフだけを使用します。リスト 2 に、基本的なグラフの作成方法を示します。

リスト 2. Dojo を使用して基本的な円グラフを作成する
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hadoop Reports</title>
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js"
    djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
    dojo.require("dojox.charting.Chart2D");
    var pieChart = {};
      var stats; // see Listing 1 for the stats
    function init(){
        pieChart = new dojox.charting.Chart2D("pie-chart");
        pieChart.addPlot("default", {
            type: "Pie",
            radius: 300,
            fontColor: "black",
            labelOffset : "-50"
        });
        var lastMonth = stats[stats.length -1];
        pieChart.addSeries("browsers", makePieSeries(lastMonth.data));
        pieChart.render();
    }
    function makePieSeries(data){
        var series = [];
        var total = 0;
        var key = "";
        for (key in data){
            total += data[key];
        }
        var label = "";
        for (key in data){
            label = key;
            label += " : ";
            label += data[key] * 100.0 / total;
            label += "%";
            series.push({y:data[key], text:label});
        }
        return series;            
    }
    dojo.addOnLoad(init);
</script>
</head>
<body>
<div id="pie-chart" style="width: 800px; height: 750px;"></div>
</body>
</html>

リスト 2 でまず注目してもらいたいのは、スクリプト・ブロックです。この中で、Dojo のパッケージ管理システム (dojo.require) を使って Dojo の 2D グラフ・オブジェクト、dojox.charting.Chart2D をダウンロードします。スクリプト・ブロックの最後の行では、dojo.addOnLoad 関数を使用して Web ページのロード完了時に関数 (この例では init 関数) を呼び出します。init 関数の中では円グラフを作成し、グラフの名前として文字列 “pie-chart” をコンストラクターに渡します。これにより、Dojo は “pie-chart” という ID を持つ HTML 要素を探し、作成するグラフの親要素としてこの要素を使用することになります。これに該当する要素は、リスト 2 の HTML 構造の中に示されています。

init 関数に話を戻すと、この関数では次に、作成した chart オブジェクトの addPlot メソッドを呼び出し、グラフのオプションを指定します。指定するオプションには、グラフのタイプも含まれます。Dojo ではさまざまなグラフのタイプをサポートしていますが、この例でグラフのタイプとして指定しているのは “Pie” です。このタイプのグラフには、例えば円グラフの半径を指定したりするなど、他のタイプのグラフには適用されない固有のオプションが多数あります。

次に chart オブジェクトの addSeries メソッドを呼び出します。リスト 1 のデータは、このメソッドで渡されますが、Dojo の円グラフと完璧に適合させるためには、このデータを少し調整する必要があります。それが、makePieSeries 関数の役割です。この関数はブラウザー・データを取り込み、単純なオブジェクトの配列を返します。配列に含まれる各オブジェクトには、ytext という 2 つのプロパティーがあり、y が値で text がラベルです。makePieSeries 関数の大半のコードは、ブラウザーの名前、アクセス回数、そして全体のアクセス回数に対して占める割合などを示すラベルを作成することを目的としています。

再び init 関数に話を戻すと、この関数で最後に行っているのは、chart オブジェクトの render 関数の呼び出しです。この関数が、Dojo にWeb ページ上で実際にグラフを描画させることになります。前述したように、プロットと一連のオプションはグラフのタイプによって異なりますが、addPlot/addSeries/render のパターンは同じです。この例でのグラフは、図 1 のように表示されます。

図 1. 6 月のブラウザー統計を示す基本円グラフ
6 月のブラウザー統計を示す基本円グラフ

図 1 に示すグラフは何の飾り気もない基本的な Dojo 円グラフで、唯一デフォルトの設定と異なるところは、グラフ上のスライスに表示されたカスタム・ラベルくらいのものです。今まで目にしたグラフのなかで最も美しいグラフとは言えないかもしれませんが、ビジネス・インテリジェンス・データを視覚的に表すこのグラフは、ほんのわずかなコードで作成することができます。この後わかるように、このグラフの見栄えを良くするのは至って簡単なことです。


見栄えを良くする

Dojo では、基本的な円グラフを簡単に作成できるようになっています。その一例が、図 1 に示したグラフです。けれども、このグラフを参考に決定を下さなければならない意思決定者に提示するには、物足りないグラフと言えるかもしれません。幸い、Dojo では見栄えを良くするのも簡単です。リスト 2 のコードをカラフルでインタラクティブな円グラフを生成するように更新したバージョンをリスト 3 に記載します。

リスト 3. カラフルな円グラフのコード
dojo.require("dojox.charting.Chart2D");
dojo.require("dojox.charting.themes.Shrooms");
dojo.require("dojox.charting.action2d.MoveSlice");
dojo.require("dojox.charting.action2d.Tooltip");

function init(){
    pieChart = new dojox.charting.Chart2D("pie-chart");
    pieChart.addPlot("default", {
        type: "Pie",
        radius: 300,
        fontColor: "black",
        labelOffset : "-50"
    });
    var lastMonth = stats[stats.length -1];
    pieChart.addSeries("browsers", makePieSeries(lastMonth.data));
    var slice = 
          new dojox.charting.action2d.MoveSlice(pieChart,"default");
    var tip = new dojox.charting.action2d.Tooltip(pieChart,"default",{
        text : function(o) { 
            var run = o.run;
            var item = run.data[o.index];
            var label = item.text;
            var split = label.split(" : ");
            var browser = split[0];
            var percentage = split[1];
            var total = item.y;
            return browser + " : " + total + " (" + percentage + ")"; 
        }
    });
    pieChart.setTheme(dojox.charting.themes.Shrooms);
    pieChart.render();
}

リスト 3 でまず注目すべき点は、新たに dojo.require の呼び出しがいくつか追加されていることです。これらのオブジェクトのそれぞれが、このコードの以降で参照されます。最初に使用される MoveSlice オブジェクトは、円のスライスにマウスが重ねられると、そのスライスを浮き上がらせて表示する単純なアニメーションです。次に使用される Tooltip オブジェクトは、円のスライスにマウスが重ねられたときに追加のテキストがツールチップとして表示されるようにします。デフォルトで表示されるテキストは、円の特定のスライスに対応するラベルだけです。ラベル以外のテキストを表示するには、上記のコードに示されているように、text という関数を使用します。この関数が、ツールチップとして表示されるテキストを生成します。この例では、FF35 : 5334121 (27.48%) のようなテキストが表示されることになります。コードの最後に追加されているのは、このグラフの setTheme メソッドの呼び出しです。このメソッドには、Dojo が提供する多数のカラー・テーマのいずれかを渡します。この例で渡しているカラー・テーマは、華やかで明るい色を提供するテーマです。図 2 に、カラフルになった円グラフを示します。

図 2. 人目を引く鮮やかな色彩の円グラフ
図 1 の円グラフをカラフルにしたバージョン

なかなかいい感じになってきました。リスト 3 に示されているように、このテーマの名前は Shrooms (幻覚性のあるキノコ) です。この名前の理由は想像できると思いますが、もしこのテーマでは鮮やかすぎると感じたら、Dojo には 30 を超えるテーマがあるだけでなく、独自のテーマを作成するのも簡単です。さらに、テーマを使わなければならないということもありません。円グラフの各スライスの色は、直接自分で指定することもできます。一方、図 1図 2 のグラフはどちらもリスト 1 の 6 月のデータしか示していません。そこで今度は、他の月のデータも処理できるようにする方法を説明します。


複数のデータ系列の操作

リスト 3 のコードを使用すれば、リスト 1 に記載した月ごとのデータに対応するグラフを簡単にレンダリングすることができます。その場合、毎回新しい円グラフを作成することになりますが、それでは効率的とは言えません。それよりももっと簡潔で効率的な方法は、グラフの基になるデータを変更することです。リスト 4 に記載する円グラフの変更バージョンでは、表示するデータ系列をユーザーが選択できるようになっています。

リスト 4. データの表示切り替えコントロールを追加した円グラフ
function init(){
    // same as in Listing 3
    var chooser = dojo.byId("series-selector");
    var i = 0;
    var monthlyStats = null;
    var opt = null;
    for (i=0;i<stats.length;i++){
        monthlyStats = stats[i];
        opt = dojo.doc.createElement("option");
        opt.value = i;
        opt.appendChild(dojo.doc.createTextNode(monthlyStats.month));
        chooser.appendChild(opt);
    }
}
function aggregateResults(results){
    var aggResults = {};
    aggResults["IE"] = results.IE8 + results.IE7 + results.IE6;
    aggResults["FF"] = results.FF35 + results.FF3;
    aggResults["SAFARI"] = results.SAFARI + results.IPHONE;
    aggResults["CHROME"] = results.CHROME;
    aggResults["OPERA"] = results.OPERA;
    aggResults["OTHER"] = results.OTHER;
    return aggResults;
}
function selectSeries(){
    var selected = dojo.byId("series-selector").value;
    var aggBox = dojo.byId("aggBox").value;
    var series = stats[selected].data;
    if (aggBox){
        series = aggregateResults(series);
    }
    pieChart.updateSeries("browsers", makePieSeries(series));
    pieChart.render();
}
...
<div id="commandBar">
    <label for="series-selector">Choose Data:</label>
    <select name="series-selector" id="series-selector" 
           onchange="selectSeries()">
    </select>
    <label for="aggBox">Aggregate Data?</label>
    <input type="checkbox" id="aggBox" name="aggBox" 
          onchange="selectSeries()"/>
</div>

リスト 4 のコードでは、グラフにいくつかのコントロールを追加します。最初に追加するのは、リスト 1 のデータ系列のそれぞれを表示するドロップダウン・ボックスです。ドロップダウン・ボックスのデータは init 関数の中で動的にロードされます。さらに、ユーザーがデータを集約するかどうかを指定するためのチェック・ボックスもあります。つまり、例えば Internet Explorer のすべてのバージョンを合計して表示するかどうかを指定することができます。

コントロールのいずれかが変更されると、selectSeries 関数が呼び出されます。この関数はまず、HTML コントロールの値を基に、どのデータ系列を使用するかを判断します。続いて集約チェック・ボックスが選択されているかどうかを調べ、選択されている場合には、使用することになったデータ系列に aggregateResults 関数を適用します。そして最後に chart オブジェクトの updateSeries メソッドを呼び出した後、render を呼び出してグラフを更新するという仕組みです。図 3 に、新しいコントロールが追加された円グラフを示します。

図 3. インタラクティブな円グラフ
カラフルな円グラフの下に、どの月のデータを表示するかを選択するコントロールと、データを集約するかどうかを指定するチェック・ボックスがあります。

これで、データ系列を切り替えられるようになりました。しかも、円グラフを作成する前に集約を適用してデータを変換することも可能です。グラフに使用するデータを切り替えるだけで、同じ円グラフであることには変わらないため、テーマと効果はすべてそのまま適用されます。このグラフは、サイトにアクセスするためにどのブラウザーが最もよく使われたのかを、年月を指定して調べる上では役立ちますが、サイトへのアクセスによく使われるようになってきているブラウザー、あるいは使われなくなってきているブラウザーはどれかといった傾向を調べたいとしたら、円グラフでは役に立ちません。そこで、傾向を調べる場合に使用できる Dojo の他のタイプのグラフについて見ていきましょう。


複数のデータ系列を使用した傾向分析

ここまでの説明では、グラフのタイプを円グラフに絞ってきました。この例で扱っているデータを視覚化する (つまり、特定の月におけるブラウザーの使用状況を相対的に示す) には、円グラフが適しているからです。その一方、傾向を示すデータ (数ヶ月間にわたる変化を示すデータ) を表示するとしたら、別のタイプのグラフが必要です。その候補として明らかなのは折れ線グラフ (線形グラフ) ですが、折れ線グラフを使用するためには、データをこのタイプのグラフで使いやすいように変換しなければなりません。リスト 5 に、そのための変換コードを記載します。

リスト 5. 傾向分析を目的としたデータ変換コード
var xStats = {};
function calcStats(){
    var i = 0;
    var mStats = null;
    var browser = "";
    var total = 0;
    for (i=0;i<stats.length;i++){
        mStats = (stats[i]).data;
        total = 0;
        for (browser in mStats){
            total += mStats[browser];
        }
        for (browser in mStats){
            if (!xStats[browser]){
                xStats[browser] = [];
            }
            xStats[browser].push(mStats[browser] / total);
        }
    }
}
dojo.addOnLoad(calcStats);

リスト 5 の先頭ではまず、新しいデータを保存するためのグローバル変数 xStats を作成します。次に定義する calcStats が、必要な変換を実行する関数です。この関数は各月のデータを繰り返し処理し、最初に各月のブラウザーの合計アクセス数を算出します。続いてもう一度ブラウザーの使用状況のデータを繰り返し処理して、それぞれの月におけるそのブラウザーの使用率を計算し、その結果を xStats に追加します。この繰り返し処理の結果、xStats はマップとなります。マップのキーはブラウザー、各キーの値は 1 月から 6 月までの各ブラウザーの使用率です。これがまさに、傾向分析に必要な履歴データです。そして最後に dojo.addOnLoad を呼び出し、この calcStats 関数が起動時に実行されるようにします。データの変換が完了すれば、あとはこのデータをグラフにするだけです。リスト 6 に、このデータを表示する折れ線グラフの作成方法を示します。

リスト 6. 傾向を示すデータによる折れ線グラフの作成
dojo.require("dojox.charting.widget.Legend");
function makeTrends(){
    var chart = new dojox.charting.Chart2D("trends");
    chart.addPlot("default", {
        type: "Lines",
        markers : true,
        tension : "S",
        lines : true,
        labelOffset : -30,
        shadows : {dx:2, dy:2, dw:2}
    });
    chart.addAxis("x");
    chart.addAxis("y", {vertical:true});
    var browser = "";
    for (browser in xStats){
        chart.addSeries(browser, makeSeries(xStats[browser]));
    }
    chart.setTheme(dojox.charting.themes.Shrooms);
    chart.render();
    var legend =  new dojox.charting.widget.Legend({chart: chart}, 
          "legend");
}    
function makeSeries(data){
    var series = [];
    var i = 1;
    for (var key in data){
        series.push({x: i++, y :data[key]});
    }
    return series;        
}
dojo.addOnLoad(makeTrends);
<div id="trends" style="width: 800px; height: 800px;"></div>
<div id="legend"></div>

上記のコードも同じく、新しい Dojo 依存関係を追加するところから始まっています。今回追加されるのは dojox.charting.widget.Legend オブジェクトです (この後、詳細を説明します)。次に、この新しいグラフを作成する makeTrends という関数を作成します。これは、円グラフを作成するコードと似ていますが、この場合に指定するグラフのタイプは “Lines” です。折れ線グラフに特有のオプションとしては、markers (データ・ポイントを明示するためのオプション)、tension (線を曲線にするためのオプション)、shadows (それぞれの線の背後に影を付けるためのオプション) といったものがあります。ありきたりな名前ですが、x 軸と y 軸も追加していることに注意してください。その後、xStats オブジェクトに保存した各ブラウザーのデータ系列を追加し、ブラウザーごとに makeSeries 関数を呼び出します。この関数は基本的にデータを (x,y) ペアに変換します。x は月 (1 は 1 月、2 は 2 月など)、y はブラウザーの使用率 (該当する月でのパーセンテージ) です。makeTrends に戻って setTheme メソッドを呼び出し、同じく Shrooms を指定した後、render を呼び出します。最後に、前述の Legend オブジェクトを使って凡例を作成すれば、グラフの作成は完了です。図 4 に、このコードによって作成されたグラフを示します。

図 4. データの傾向を示すグラフ
傾向を示す色付きの折れ線グラフと、その下に表示された凡例

上記のグラフからは、Firefox® 3.5 と Internet Explorer® 8 の使用率は両方とも上がっていること、そして Internet Explorer および Firefox の古いバージョンは使用率が下がってきていることがわかります。折れ線グラフの他にも、このコードを使ってさまざまなタイプのグラフを試してみてください。例えば、StackedLines も面白いタイプのグラフです。さらに、データ系列を変更する (例えば、集約表示を追加する) など、前に説明した手法を組み合わせてみることもできます。


まとめ

この記事では、Dojo ツールキットを使用してインタラクティブなグラフを作成する際の基本を説明しました。ここでは Dojo がサポートする多種多様なグラフのうち、2 つのタイプを取り上げただけです。タイプの多くにはそれぞれに独特の機能があり、これらの機能を使ってグラフを実に魅力的な外観にすることができます。Dojo のドキュメントで使用できるオプションを調べて、独自のレポート作成アプリケーション用にとびきりのグラフを作成してください。


ダウンロード

内容ファイル名サイズ
Article source codereports.zip3KB

参考文献

学ぶために

製品や技術を入手するために

  • Apache Hadoop を入手してください。この記事ではバージョン 0.20 を使用しました。
  • Java SDK を入手してください。この記事では Java SDK を使用しました。
  • Google Libraries API: Google の Ajax API を使って Dojo をページにダウンロードしてください。
  • Hadoop をベースに作成された Pig および Hive フレームワークについて調べてください。
  • IBM 製品の評価版をダウンロードして、DB2®、Lotus®、Rational®、Tivoli®、および WebSphere® のアプリケーション開発ツールとミドルウェア製品を使ってみてください。

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development
ArticleID=548940
ArticleTitle=Apache Hadoop と Dojo による経済的なビジネス・インテリジェンス: 第 2 回 Dojo ツールキットを使用して、印象的でインタラクティブなレポートを作成する
publish-date=08312010