Vega解説 〜動的なグラフ〜

前回はここ

今回は、interactiveなグラフを書いていきます。

カーソルを合わせた時に色を変える

バーチャートのバーにカーソルを合わせた時に赤色に変え、外すと青色に変えます。

Vega Editorで開く
前回との差分

カーソルを合わせた時に色が変わるのは、 encode プロパティにhoverを追加することで実現しています。
hover 属性で色を更新するだけだと、カーソルを外した時でも色が変わったままになりません。
そのため、enter プロパティにあった色の設定を、update に移動することで、変更を感知して色を戻るようにしています。

カーソルを合わせた時にテキストを表示する

バーにカーソルを合わせた時に、バーの上に数字を表示します。
signals と text typeのMarkを追加することで実現します。

Vega Editorで開く
差分

signals を追加しています。これは、変数のようなもので動的に値を変更できます。
ここでは、marks の rect に対するイベントによって値を変更します。バーにカーソルを合わせた時に、合わせたバーのデータでsignals の値をアップデートしています。これは、Vega EditorのSignal View Window で値が変わっていくことを確認できます。

なお、rect の代わりに、name で指定した値を直接指定することもできます。

"on": [
  {"events": "@layer_0:mouseover", "update": "datum"},
  {"events": "@layer_0:mouseout",  "update": "{}"}
]

これで、Vega Examples にある一番最初のBar Chart とほぼ一緒になります。

次回は、時系列データ です。