Vega解説 〜基準線をひく〜

今回は、垂直、あるいは水平な線を引きます。グラフと一緒に引くことで閾値と表現したりします。

離散データに閾値の線を引く

以前作成した離散データに閾値(y=35)の線を引きます。ついでに閾値を下回ったものものは、棒グラフの色を変更します。

Online Editor で開く
差分

詳細

data に閾値のデータを追加します。

 {"name": "threshold", "values": [{"value": 35}]},

marks に以下を追加します。線は type=rule で表現します。これは(x,y)から(x2,y2)に線を引くものになります。

ポイントは、xにグラフ描画キャンバスの始点０を指定し、x2 で幅一杯の端を表すため {"field": {"group": "width"}} を設定しています。

    {
      "name": "layer_threshold",
      "type": "rule",
      "from": {"data": "threshold"},
      "encode": {
        "enter": {
          "x": {"value": 0},
          "x2": {"field": {"group": "width"}},
          "y": {"scale": "yscale", "field": "value"},
          "y2": {"scale": "yscale", "field": "value"},
          "strokeWidth": {"value": 2},
          "stroke": {"value": "red"}
        }
      }
    }

閾値以下の棒グラフの色を変更するために、元々ある棒グラフのmarkの fill を変更します。

          "fill": [
            {
              "test": "datum.amount < data('threshold')[0].value",
              "value": "red"
            },
            {"value": "steelblue"}
          ]

時系列データに今日の日付の直線を引く

Vega 解説 ~時系列データを処理する~の最後のグラフをベースに今日を表す線を追加します。

Online editorで開く
※ data の month は今日の日付を出すために適当に変更してください。

詳細

marksに以下を追加しています。
x,x2に now() という関数を利用しています。

    {
      "name": "layer_today",
      "type": "rule",
      "encode": {
        "enter":{
          "x": {"scale": "xscale", "signal": "now()"},
          "x2": {"scale": "xscale", "signal": "now()"},
          "y": {"value": 0},
          "y2": {"field": {"group": "height"}},
          "strokeWidth": {"value": 5},
          "stroke": {"value": "red"}

        }
      }
    }