Search code examples
vega-litevega

How to draw a line in a line chart in vega-lite?

I have a curve plotted from index

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.4.json",
    "title": {
    "text": "Receiver Operating Characteristics - Area Under Curve",
    "anchor": "middle",
    "fontSize": 16,
    "frame": "group",
    "offset": 4
  },
  "data": {
    "url" : {
        "%context%": true,
        "index": "roccurve_index2",
        "body": {
          "size":10000,
          "_source": ["lr_fpr", "lr_tpr"],
        }
      }  
      "format": {"property": "hits.hits"},
    },
  "mark": {
    "type": "line",
    "point": true
  },
  "encoding": {
    "x": {"field": "_source.lr_fpr", "type": "quantitative", "title":"False Positive Rate"},
    "y": {"field": "_source.lr_tpr", "type": "quantitative", "title":"True Positive Rate"}
  }
}

the plot looks like enter image description here

Now i need to draw a base line for base model between 0 and 1 like enter image description here

Is this possible, and make that as dashed line with legend showing names as Base Model, RF Model

Solution

  • Yes, it is possible using Layered Views.

    I'll use the Line Chart example to modify and add another line that's also dashed. Original chart: https://vega.github.io/editor/#/examples/vega-lite/line

    Here's the modified chart, I used explicit values for the straight line:

    enter image description here

    https://vega.github.io/editor/#/gist/152fbe5f986ba78e422bb3430628f010/spec.json

    Layer Solution

    When you use layered view, you can lay multiple lines in the same chart and same x and y axis

      "layer" : [
      {
         //mark #1
      },
      {
        //mark #2
      }
  ]

    Dashed Line

    Can be achieved using strokeDashproperty. See this example: Line chart with varying stroke dash