SplunkでD3.jsを動かす

SplunkでD3.jsを動作させる例として、Appの「Splunk Web Framework Toolkit」を使ってバブルチャートを表示させる手順を紹介します。

ちなみに、D3をご存じない方には以下のチュートリアルが参考になると思います。

D3　入門｜スコット・マレイ
http://ja.d3js.info/alignedleft/tutorials/d3/

#ダッシュボードにバブルチャートを表示させる

##「Splunk Web Framework Toolkit」のインストール
以下からダウンロードして、Splunkにインストールしてください。
https://splunkbase.splunk.com/app/1613/#/overview

##Appの作成
App作成画面から「Try_D3」を作成します(フォルダ名は「try_d3」とします)。

##Dashboardの作成
作成したApp「Try_D3」のDashboardで「Bubblechart」の名前で作成します。

##サーチ文の作成
「Bubglechart」のDashboardで「Add Panel」から「Statistics Table」を選択し、以下のサーチ文を入力します。

```shell-session
index=_internal | stats count by sourcetype
```

すると以下のような画面になります。

![スクリーンショット 2017-10-05 17.42.29.png](https://qiita-image-store.s3.amazonaws.com/0/201618/dbf7ada3-1dfb-f123-07eb-40acb20e4f82.png)

##HTMLへ変換
Dashboardsの画面に戻り、「Edit」から「Conver to HTML」を選択します。

##D3.jsライブラリの配置
try_d3配下に"appserver/static"ディレクトリを作成し、その配下に"splunk_wftoolkit/appserver/static/components"をコピーします。

```shell-session
$ mkdir -p /Applications/Splunk/etc/apps/try_d3/appserver/static
$ cp -r /Applications/Splunk/etc/apps/splunk_wftoolkit/appserver/static/components /Applications/Splunk/etc/apps/try_d3/appserver/static/
```

##ライブラリへのパスを通す

以下の記述を見つけ、

```js
// <![CDATA[
```

その下に以下を追記します。

```js
require.config({
    baseUrl: "{{SPLUNKWEB_URL_PREFIX}}/static/js",
    waitSeconds: 0,
    paths:
    {
        "app": "../app"
    }
});
```

requireの最下に以下を追加します。

```js
"app/try_d3/components/bubblechart/bubblechart"
```

functionの最下に以下を追加します。

```js
BubbleChartView
```
##バブルチャートのviewを定義

以下の記述を見つけ

```js
// VIEWS: VISUALIZATION ELEMENTS
```

その下に以下を追記します。

```js
var bubblechart = new BubbleChartView({
    id: "bubblechart",
    managerid: "search1",
    labelField:"sourcetype",
    valueField: "count",
    categoryField: "sourcetype",
    el: $("#bubblechart")
}).render();
```

ここで、各属性は以下の通りです。

 * id,el : DOMエレメントとして、ダッシュボードに表示させる際に使用
 * managerid : サーチ文との紐付け."SEARCH MANAGERS"のidを使用
 * labelField : 各々のバブルに表示させるラベル
 * valueField : 各々のバブルの大きさの指標
 * categoryField : 色をつけるためのグルーピング

##ダッシュボードへの表示
以下の記述を見つけ

```html
<div id="element1" class="dashboard-element table" style="width: 100%">
```

以下に書き換えます(ここで上記elを使用します）。

```html
<div id="bubblechart" class="dashboard-element table" style="width: 100%">
```

描画してみます。

![スクリーンショット 2017-10-06 17.43.11.png](https://qiita-image-store.s3.amazonaws.com/0/201618/6092bd01-b980-9274-4fbb-698f7ea11d1e.png)


これでは小さすぎるので、サイズを調整します。

```html
<div id="bubblechart" class="dashboard-element table" style="width:400px;height:300px">
```

いい感じになりました。


![スクリーンショット 2017-10-06 17.41.41.png](https://qiita-image-store.s3.amazonaws.com/0/201618/3ef1a4e3-4f6f-a1ca-e9af-85548b0577c4.png)


#インタラクティブ（ドリルダウン）動作を定義する

バブルチャートを表示させただけではちょっとつまらないので、バブルをクリックした際の動作（ドリルダウン）を定義します。バブルをクリックすると該当のデータの詳細を統計テーブルに表示させるという動きにします。

##表示領域の作成
まず以下をバブルチャートの下に追記して、表示領域を作成します。

```html
<div id="row2" class="dashboard-row dashboard-row2">
    <div id="panel2" class="dashboard-cell" style="width: 100%;">
        <div class="dashboard-panel clearfix">
                
            <div class="panel-element-row">
                <div id="statisticstable" class="dashboard-element table" style="width: 100%">
                    <div class="panel-body"></div>
                </div>
            </div>
        </div>
    </div>
</div>
```

  // VIEWS: VISUALIZATION ELEMENTSに以下を追記します。

```js
        var statisticstable = new TableElement({
            "id": "statisticstable",
            "drilldown": "none",
            "managerid": "search2",
            "el": $('#statisticstable')
        }, {tokens: true, tokenNamespace: "submitted"}).render();
```

##サーチ文の定義

以下の記述を見つけ、

```js
// SEARCH MANAGERS
```

以下を追記します。

```js
var search2 = new SearchManager({
            "id": "search2",
            "cancelOnUnload": true,
            "search": "index=_internal sourcetype=$select_sourcetype$ | table _time source",
            "latest_time": "now",
            "status_buckets": 0,
            "earliest_time": "-24h@h",
            "sample_ratio": null,
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "tokenDependencies": {
            },
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});
```

##イベントハンドラの定義

バブルクリック時の動作を記述します。
上記で作成した、

```js
var bubblechart = new BubbleChartView({
    id: "bubblechart",
    managerid: "search1",
    labelField:"sourcetype",
    valueField: "count",
    categoryField: "sourcetype",
    el: $("#bubblechart")
}).render();
```

の下に以下を追記します。

```js
bubblechart.on("click", function(e) {
   if (e !== undefined) {
        setToken("select_sourcetype", e.name);
   }
});
```

ここで、バブルチャートの場合、eは以下のような構成になっています（上記ではname属性を利用しました）。

```json
{
  name: labelFieldの値,
  category: categoryFieldの値,
  value: valueFieldの値
}
```

以上で完成です。下図のようにバブルをクリックすると、下の統計テーブルに詳細が表示されます。

![スクリーンショット 2017-10-07 16.43.33.png](https://qiita-image-store.s3.amazonaws.com/0/201618/d4248901-cf29-1b6c-cc0e-b6c3421750a4.png)


なお、完成形の構成をgithubに置いておきましたので、ご興味がある方はご覧ください。
https://github.com/myogada/Splunk_Try_D3