Add additional tick to allow some space between the data points and the borders]

Question

See the attached screenshot

Desire is to allow some offset between the data points and the border of the chart. Especially useful for user interactions such as brush to allow users to start brushing from the right side.

I think fall back plan is to manually compute the scale domain (min, max + some padding), but I was trying to see if there is already a prebuilt option available.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A scatterplot showing horsepower and miles per gallons for various cars.",
  "data": {
    "values": [
      {"Horsepower": 10, "Miles_per_Gallon": 100},
      {"Horsepower": 10, "Miles_per_Gallon": 120},
      {"Horsepower": 8, "Miles_per_Gallon": 77},
      {"Horsepower": 6, "Miles_per_Gallon": 80},
      {"Horsepower": 4, "Miles_per_Gallon": 20},
      {"Horsepower": 2, "Miles_per_Gallon": 60},
      {"Horsepower": 0, "Miles_per_Gallon": 150}
    ]
  },
  "mark": "point",
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"}
  }
}

Answer 1

I don't know of a built-in configuration to add padding to the automatically-determined scale domain, but here's a hack that lets you achieve this by plotting a transparent point at a specified position past the maximum:

{
  "data": {
    "values": [
      {"Horsepower": 10, "Miles_per_Gallon": 100},
      {"Horsepower": 10, "Miles_per_Gallon": 120},
      {"Horsepower": 8, "Miles_per_Gallon": 77},
      {"Horsepower": 6, "Miles_per_Gallon": 80},
      {"Horsepower": 4, "Miles_per_Gallon": 20},
      {"Horsepower": 2, "Miles_per_Gallon": 60},
      {"Horsepower": 0, "Miles_per_Gallon": 150}
    ]
  },
  "layer": [
    {
      "mark": {"type": "point", "opacity": 0},
      "transform": [
        {
          "aggregate": [
            {"field": "Horsepower", "op": "max", "as": "max_Horsepower"}
          ]
        },
        {"calculate": "datum.max_Horsepower + 2", "as": "max_Horsepower"}
      ],
      "encoding": {"x": {"field": "max_Horsepower", "type": "quantitative"}}
    },
    {
      "mark": "point",
      "encoding": {
        "x": {"field": "Horsepower", "type": "quantitative"},
        "y": {"field": "Miles_per_Gallon", "type": "quantitative"}
      }
    }
  ]
}