■ はじめに
splunkのダッシュボードをELKに移行する案件でvegaに出会いました。
splunkもelkもvegaも初めて触りますし、統計周りの知識もなくなかなかつらい思いをしました。
特にvegaに関しては公式ドキュメント見ても全くぴんとこず、全くと言っていいほど記事が無く、多少あっても入門的な記事も無く、当案件にはマッチしないモノばっかり。
2ヶ月程度の経験ではありますが、折角色々知って少しできるようになったので、出来るだけ分かりやすく記事を書いていきたいと思います。
（まさか初Qiitaがvegaとは全く思わなかったなぁ・・・）
■ vegaとは
vega
json形式で記述する事でデータの可視化（グラフとか）を生成してくれるツールですね。
■ vega-liteとは
vega-lite
vegaよりも高レベルの文法ですね。
所感としてはvegaよりも文法が簡潔でわかりやすいかなと思います。
この記事ではvegaではなくvega-liteについて記載していきます。
■ 例
公式ドキュメントにある棒グラフの例ですがvega.github.io/editorに以下のように記述したら
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"category":"A", "group": "x", "value":0.1},
{"category":"A", "group": "y", "value":0.6},
{"category":"A", "group": "z", "value":0.9},
{"category":"B", "group": "x", "value":0.7},
{"category":"B", "group": "y", "value":0.2},
{"category":"B", "group": "z", "value":1.1},
{"category":"C", "group": "x", "value":0.6},
{"category":"C", "group": "y", "value":0.1},
{"category":"C", "group": "z", "value":0.2}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "category"},
"y": {"field": "value", "type": "quantitative"},
"xOffset": {"field": "group"},
"color": {"field": "group"}
}
}
こんなグラフを作ってくれる
素敵ですね!!
■ vscodeでvega-lite
vega-editorでも書くことは可能ですが、私は何でもvscodeでできるようにしたいので紹介します。
vscodeでvega-liteを扱える環境を整えたいと思います。
拡張機能
拡張機能のVega ViewerとHjsonをインストールします。
hjsonはjsonにコメント書けるしクォーテーションも不要だから楽なので、根っからのめんどくさがりータの私は好きですね。（ほんとつい最近知った）
上記のようなコードをファイル名.hjsonで保存しCtrl + Alt + vでviewを表示できます。
jsonとhjsonを織り交ぜてくので注意してください。
jsonの場合はドキュメントやVega Editorからのコピペでhjsonはvscodeでやってます。
サンプルデータ
vegaのリポジトリをcloneします。
git clone https://github.com/vega/vega.git
vega/docs/data/に公式ドキュメントで使用しているデータがあるので、サンプルデータの確認だったり、それを使って色々試すことができます。
■ 基本的な構造
schemaブロック
いわゆるお約束でversionを変更する事も可能です。
https://vega.github.io/vega-lite/docs/spec.html
{
// "$schema": "https://vega.github.io/schema/vega-lite/v4.json"
"$schema": "https://vega.github.io/schema/vega-lite/v5.json"
}
ここで一つ注意が。
以前、vega-editorでできてkibana-vegaでできなかった事があります。
データブロックはべた書きなので基本的には同じ動きをするはずなのですが、使用しているkibanaのversionが古くvega-lite/v4しか使えなかったため、v5の機能が使えずに大分ハマったことがあります。
具体的なソースは今後ご紹介していきますが、このような事例も思い出せる限りご紹介していきます。
dataブロック
viewの表示に使用するデータですね。
https://vega.github.io/vega-lite/docs/data.html
直書きの場合
{
"data": {
"values": [
{"category":"A", "group": "x", "value":0.1},
{"category":"A", "group": "y", "value":0.6},
{"category":"A", "group": "z", "value":0.9},
{"category":"B", "group": "x", "value":0.7},
{"category":"B", "group": "y", "value":0.2},
{"category":"B", "group": "z", "value":1.1},
{"category":"C", "group": "x", "value":0.6},
{"category":"C", "group": "y", "value":0.1},
{"category":"C", "group": "z", "value":0.2}
]
}
}
ファイルを参照する場合
{
// "data": {"url": "data/stocks.csv"} // Vega Editorだとこっち
"data": {"url": "vega/docs/data/stocks.csv"} // cloneしたリポジトリを参照する場合はこっち
}
kibanaのvegaでelasticクエリを使う場合
{
data: {
url: {
index: "xxxx_index_01"
body: {
size: 0
query: {
// くえり
}
aggs: {
// 集計
}
}
}
format: {
property: "aggregations.XXX_buckets.bucket"
}
}
}
markブロック
viewの種類を設定します。
線グラフや棒グラフなどを設定するブロックですね。
標準マークプロパティとmark毎に特有のプロパティがあります。
mark
bar
line
{
// typeのみを設定する場合
mark: bar // 棒グラフ
// markに様々な設定をしたい場合
mark: {
type: line // 線グラフ
strokeWidth: 10 // 線などの太さ（標準プロパティ）
interpolate: linear // 線の形状（線グラフ特有のプロパティ）
}
}
encodingブロック
x軸やy軸等を設定します。
プロパティの種類が多すぎて覚えるの大変ですが、まず基本はx,y,colorそしてaxisといったところでしょうか。
xやy等のプロパティはPosition Channelsといって軸のfieldやtype(定量的・時間的等)を指定します。
colorは指定したフィールド毎に色分けし凡例を表示してくれます。
conditionを使う事で条件により色分けする事も出来ます。
axisでは軸の様々な設定が可能です。
encoding
Position Channels
field
type
Mark Property Channels
condition
axis
{
encoding: {
x: {
field: x_field // x軸のフィールドを指定
type: temporal // 種類は時間的
axis: {
title: "x軸タイトル" // x軸のタイトル
// title: null // 非表示したい場合はnull
titleFontSize: 30 // タイトルのフォントサイズ
labels: flse // x軸ラベルの表示非表示
labelAngle: 0 // x軸ラベルの向き
labelFontSize: 20 // x軸ラベルのフォントサイズ
labelColor: "#af938f" // x軸ラベルのフォントカラー
grid: false // x軸のグリッドの表示/非表示
ticks: false // x軸のメモリの表示非表示
// グリッドや軸メモリにも様々なプロパティがある
}
}
y: {
field: y_field // y軸のフィールドを指定
type: quantitative // 種類は定量的
}
color: {
field: z_field // z_fieldを分類して表示する
condition: [
// 条件と合致する場合の色を指定する
// リストで定義する事によって複数の条件を指定出来る
{
test: datum.y_field > 10
value: "#987654"
}
{
test: datum.y_field <= 10
value: "#454544"
}
]
}
}
}
上記を踏まえた上での例
とにかく適当にやってみました。
vega-editorに張り付けて実行してみた下さい。
{
"data": {
"values": [
{"category":"A", "group": "1", "value":0.1},
{"category":"A", "group": "2", "value":0.6},
{"category":"A", "group": "3", "value":0.9},
{"category":"A", "group": "4", "value":1.1},
{"category":"A", "group": "5", "value":0.4},
{"category":"B", "group": "1", "value":0.4},
{"category":"B", "group": "2", "value":0.3},
{"category":"B", "group": "3", "value":1.1},
{"category":"B", "group": "4", "value":0.7},
{"category":"B", "group": "5", "value":0.8},
{"category":"C", "group": "1", "value":0.6},
{"category":"C", "group": "2", "value":0.1},
{"category":"C", "group": "3", "value":0.2},
{"category":"C", "group": "4", "value":0.3},
{"category":"C", "group": "5", "value":0.6}
]
},
"mark": {
"type": "line",
"strokeWidth": 3
},
"width": 350,
"encoding": {
"x": {
"field": "group",
"axis": {
"domain": false,
"titleFontSize": 20,
"title": "ｘ軸タイトル",
"titleColor": "#7f7ff9",
"titlePadding": 20,
"grid": true,
"gridColor": "#0f7ff9",
"gridWidth": 0.5,
"tickWidth": 6,
"tickSize": 20,
"tickColor": "#8f2f77",
"labelPadding": 10,
"labelFontSize": 30,
"labelAngle": 0,
"labelColor": "#af938f"
}
},
"y": {
"field": "value",
"type": "quantitative",
"axis": {
"title": "ｙ軸タイトル",
"titleAngle": 0,
"titlePadding": 50
}
},
"color": {
"field": "category",
"condition": [
{
"test": "datum.category === 'B'",
"value": "#ff8888"
},
{
"test": "datum.category === 'A'",
"value": "#66ff66"
},
{
"test": "datum.category === 'C'",
"value": "#4444ff"
}
]
}
}
}
こんな感じのグラフになります。
本当に適当にやったらすごい気持ち悪くなりましたW
■ あとがき
今回はlineとbarしか紹介してませんが、様々なmark typeが存在します。
今後も各typeを個別に紹介する事はないので、気になる方は公式ドキュメントを見てみて下さい。
今後もvega-liteに苦しむ人の為に少しずつ書いていこうと思います。
少ししか触っていない上に、一般的なグラフの作成をしたわけではないので、高度な事は出来ませんが少しでもお役に立てたらと思います。