Is there a way to add a line break between the plot and X axis (vega-lite)

Question

I am not sure if it makes sense but will it be possible to add a line break between the start of the plot and the X-axis.

For e.g.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "width": {"step": 10},
  "height": 120,
  "data": {"url": "data/cars.json"},
  "mark": "area",
  "encoding": {
    "x": {"field": "Name", "type": "nominal", "scale": {"round": false}},
    "y": {"aggregate": "count", "type": "quantitative"}
  }
}

Hopeful output:

Answer 1

One way to do this is by adding a scale.domain argument:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "width": {"step": 10},
  "height": 120,
  "data": {"url": "data/cars.json"},
  "mark": "area",
  "encoding": {
    "x": {"field": "Name", "type": "nominal", "scale": {"round": false}},
    "y": {"aggregate": "count", "type": "quantitative", "scale": {"domain": [-0.5, 6]}}
  }
}

Another way to do this is to use the y and y2 encodings to set a bottom value for the area chart:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "width": {"step": 10},
  "height": 120,
  "data": {"url": "data/cars.json"},
  "mark": "area",
  "transform": [{"calculate": "0.1", "as": "bottom"}],
  "encoding": {
    "x": {"field": "Name", "type": "nominal", "scale": {"round": false}},
    "y": {"aggregate": "count", "type": "quantitative"},
    "y2": {"field": "bottom"}
  }
}