1

I want to add vertical Rule lines to my chart as date milestone indicators (like the red line in image). X axis is dates (temportal), and y axis values are numbers.

Vertical rule is the red line

In image is the closest I could get using explicit values for data property in Rule layer:

{
    "mark": "rule",
    "data": {
        "values": [
            "{\"x\":\"2020/04/10\"}"
        ]
    },
    "encoding": {
        "x": {
            "field": "x",
            "type": "ordinal",
        },
        "color": {
            "value": "red"
        },
        "size": {
            "value": 1
        }
    }
}

I have also tried types: "type": "temportal", and "type": "quantitative", "aggregate": "distinct" with no luck.

My goal is to be able to add multiple red vertical Rule lines with explicit/constant x values to the chart.

Cortex
  • 585
  • 3
  • 19

1 Answers1

2

Datum is meant for specifying literal fixed values. You can add several rules by layering them together with your main data. This approach works with quantitative data encoded in the x channel:

"layer": [
  {
    "mark": { "type": "line" },
    "encoding": { "y": {...}, },
  },
  {
    "mark": { "type": "rule", "color": "red", "size": 1, },
    "encoding": {"x": {"datum": 42}},
  },
  {
    "mark": { "type": "rule", "color": "blue", "size": 1, },
    "encoding": {"x": {"datum": 100}},
  },
]

For dealing with temporal data, you additionally have to specify how it should be parsed. This approach works for me:

"layer": [
  {
    // First layer: spec of your main linear plot.
  },
  {
    // Second layer: spec of the vertical rulers.
    "mark": { "type": "rule", "color": "red", "size": 2, },
    "encoding": {
      "x": { "field": "date", "type": "temporal", },
    },
    "data": {
      "values": [
        {"date": "25 May 2020 14:15:00"},
        {"date": "25 May 2020 14:20:59"},
      ],
      "format": {
        "parse": {"date": "utc:'%d %b %Y %H:%M:%S'"}
      }
    },
  },
]
sublazy
  • 36
  • 4
  • Have you tried this answer? I applied the suggestion and it didn't work, I got the same result as the image above (NaN). Problem happens when type of x domain is 'temportal', your solution would work if type was 'quantitative' (number values), and I couldn't figure out how to get it work with date values. – Cortex May 25 '20 at 10:22
  • Yeah, I tried it on quantitative data... But then it seems like this in an issue of parsing the timestamps properly. I edited the answer to include a solution for temporal data. – sublazy May 25 '20 at 16:42
  • The edited solution (second code segment) worked! I have tried it on my chart and got the desired result, see: https://imgur.com/Pf6NGU0. – Cortex May 26 '20 at 04:38