こんにちは、今年7月にElastic Certified Engineer認定を取得したHiroshi Yoshioka です。
この記事は Elastic stack (Elasticsearch) Advent Calendar 2018 の11日目の記事になります。
はじめに
今日のお題はVegaです。
VegaはKibanaの可視化の幅を拡大する優れたフレームワークなのですが、Elastic公式ドキュメントに情報が少ないため、取っつきやすいとは言えません。
そこで本記事では、Vegaを利用時によくある7つの疑問について回答します。 ※Vega-Liteについては扱いませんのでご了承ください。
1. そもそもVegaって何者？
VegaはインタラクティブなVisualizationを作成するための宣言型Web言語。
JSONやCSVを読み込み、様々なチャートを可視化することができます。
Vega公式ページにあるサンプルを見るとすぐに分かりますが、表現できるVisualizationの種類が非常に豊富です。
例えば、このチャートを開いてみてください。
一見普通の散布図に見えますが、丸いシンボルをドラッグすると、時間軸を変更することができる！
Vegaを利用すると、このようなインタラクティブな表現をKibanaで実現できるのです。 vega.github.io
2. KibanaとVegaの関係は？
Kibana Ver.6.2.0からVisualizeにVegaを利用できるようになりました。
Vegaで作成したチャートは、Visualizeとして保存したりDashboardへ配置することが可能です。
※Ver.6.2.0以前のKibanaでVegaを利用するには、別途プラグインのインストールが必要になります。
3. 手取り早くKibana上で動くVegaを見るには？
Kibana 6.4.0以降、ワンクリックで可視化可能なサンプルデータが付属しており、VegaのVisualizeも含まれています。
こちらを利用しましょう。（本記事では6.5.0を使用します。）
まず以下をセットアップ。サンプルデータ投入画面を開きます。
- Elasticsearch 6.5.0
- Kibana 6.5.0
Sample flight dataの「Add」をクリックして、航空データを投入します。
View dataをクリックしてDashboardをオープン。
右下にVegaで作られたVisualize(世界地図)があるのでEdit Visualizationを選択。 世界地図にプロットされた空港にマウスカーソルを合わせると、フライト情報のPathとツールチップが表示されます。
4. Vegaの公式ページのサンプルがKibanaで動作しないのはなぜ？
Vegaの公式ページには、Vega最新バージョンに関するドキュメントが公開されています。
2018/12/11時点では、Vegaの最新は4.4.0。一方で、Kibana 6.5.0に組み込まれているのはVega 3.3.1です。
だいぶ、バージョンに開きがありますね。
公式ページには、Vega 4.Xで追加された機能を用いたサンプルも公開されていますが、当然ながら、Vega 3.3.1が組み込まれたKibanaでは動作しません。
5. Kibanaに組み込まれたVegaのバージョンを確認する方法は？
ChromeでVegaのVisualize画面を表示し、デベロッパーツールを開きます。続いて、Console画面で以下のコマンドを実行してください。
VEGA_DEBUG
Vegaは3.3.1、Vega-Liteは2.4.0が組み込まれていることが分かります。
6. ダッシュボードでVegaを操作してダッシュボード全体にフィルタをかける方法は？
ダッシュボードに配置された通常のVisualizeは、クリックすることでContents Filterを作成し、ダッシュボード全体にフィルタをかけることができます。
Vegaの場合も同様にフィルタをかける方法はあるのでしょうか。
はい、あります。
公式ドキュメントには書かれていませんが、Kibana 6.4.0以降ではVegaからContents Filterの追加／削除を行う機能(関数)が組み込まれています。
# ダッシュボードにContents Filterを追加する # query ：フィルタ内容 # index-pattern ：フィルタするインデックスパターン名 kibanaAddFilter( <query>, <index-pattern>)
先ほど開いた、航空データのVega Visualizeにフィルタ機能を追加してみましょう。
Vegaコードを開き、signals配下に以下を追加して保存します。
{
name: filter
on: [
{
events: @airport:click
update: '''
kibanaAddFilter({
match: {
OriginAirportID : {
query: datum.key,
type: 'phrase'
}}},'kibana_sample_data_flights')
'''
}
]
}
航空データダッシュボードを開いてフィルタ機能を確認してみましょう。
フィルタを実行する前です。データは298件。
地図上の適当なシンボルにカーソルを合わせて、クリック。
何やら、他のVisualizeの様子が変わりました。
ダッシュボード上部をみてみると、Contents Filterが追加されてデータが5件に絞り込まれていることが分かります。
他にも、指定したフィルタを解除する関数や、
kibanaRemoveFilter( <query>, <index-pattern>)
全てのフィルタを解除する関数。
kibanaRemoveAllFilters()
TimePickerを操作する関数も用意されています。
kibanaSetTimeFilter(<start>, <end>)
7. Vegaをデバッグするには？
Vegaのデバッグはデベロッパーツールにて「VEGA_DEBUG」オブジェクトを介して行います。 代表的なコマンドを紹介します。
dataの内容を表示する
# valuesの内容を表示
VEGA_DEBUG.view.data('values')
dataの内容をテーブル表示する
# valuesの内容をテーブル表示
console.table(VEGA_DEBUG.view.data('values'))
signalの値を取得する
# heightの値を取得
VEGA_DEBUG.view.signal('height')
signalの内容を任意の値に変更して実行する
# heightの値を100変更
VEGA_DEBUG.view.signal('height',100).run();
scaleの内容を表示する
# scale yの内容を表示 VEGA_DEBUG.view._runtime.scales.y
最後に
本記事ではVega利用におけるよくある7つの疑問に回答しました。 あとは文法を覚えれば（これが大変なのですが）、Vegaを自在に扱うことができるはずです。
Let's enjoy vega life !
Acroquest Technologyでは、キャリア採用を行っています。
- ディープラーニング等を使った自然言語／画像／音声／動画解析の研究開発
- Elasticsearch等を使ったデータ収集／分析／可視化
- マイクロサービス、DevOps、最新のOSSを利用する開発プロジェクト
- 書籍・雑誌等の執筆や、社内外での技術の発信・共有によるエンジニアとしての成長
少しでも上記に興味を持たれた方は、是非以下のページをご覧ください。
ユーザに最高の検索体験を提供したいエンジニアWanted！ - Acroquest Technology株式会社のエンジニア中途・インターンシップの求人 - Wantedlywww.wantedly.com
