Vega-lite: Line chart. start line mark from the y-axis domain line

Question

I have a line graph. I wanted the lines to start from the y-axis only. Currently the line is starting after a break.

This is the original graph:
https://vega.github.io/editor/#/gist/dcc9afece4dc6a5e89835650ec607280/og_chart.json

This is the chart in which I tried to get the change:

https://vega.github.io/editor/#/gist/e99bd5bd778e63af42bbbe6757301523/change_og_chart.json

This is the current chart

I would like to change this so the lines start from the y-axis only.

How could I shift the grid lines to the right to start with the y-axis domain line or is there a better way to start the line from the domain line.

Answer 1

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 800,
  "height": 200,
  "data": {
    "values": [
      {
        "60": 100,
        "90": 150,
        "120": 200,
        "-120": 10,
        "-90": 15,
        "-60": 30,
        "type": "Mango"
      },
       {
        "-120": 50,
        "-90": 30,
        "-60": 45,
        "60": 90,
        "90": 140,
        "120": 190,
        "type": "Apple"
      }
    ]
  },
  "transform": [{"fold": ["-120", "-90", "-60", "60", "90", "120"]}],
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": {
          "field": "key",
          "type": "quantitative",
          "sort": null,
          "axis": {"tickCount": 10, "values": [-120,-90,-60,0,60,90,120],
          "labelExpr": "abs(datum.value)"}
        },
        "y": {"field": "value", "type": "quantitative"},
        "color": {"field": "type", "type": "nominal"}
      }
    },
    {
      "mark": {
        "type": "rule",
        "color": "maroon",
        "size": 3,
        "strokeDash": [6, 4]
      },
      "encoding": {"x": {"datum": 0, "bandPosition": 0}}
    }
  ]
}

Answer 2

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 800,
  "height": 200,
  "data": {
    "values": [
      {
        "60": 100,
        "90": 150,
        "120": 200,
        "-120": 10,
        "-90": 15,
        "-60": 30,
        "type": "Mango"
      },
       {
        "-120": 50,
        "-90": 30,
        "-60": 45,
        "60": 90,
        "90": 140,
        "120": 190,
        "type": "Apple"
      }
    ]
  },
  "transform": [{"fold": ["-120", "-90", "-60", "60", "90", "120"]}],
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": {
          "field": "key",
          "type": "quantitative",
          "sort": null,
          "axis": {"tickCount": 10, "values": [-120,-90,-60,0,60,90,120]}
        },
        "y": {"field": "value", "type": "quantitative"},
        "color": {"field": "type", "type": "nominal"}
      }
    },
    {
      "mark": {
        "type": "rule",
        "color": "maroon",
        "size": 3,
        "strokeDash": [6, 4]
      },
      "encoding": {"x": {"datum": 0, "bandPosition": 0}}
    }
  ]
}

Answer 3

You are using discrete x-axis (bands) rather than continuous. I would do something like this.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 800,
  "height": 200,
  "data": {
    "values": [
      {
        "pre_120": 10,
        "pre_90": 15,
        "pre_60": 30,
        "post_60": 100,
        "post_90": 150,
        "post_120": 200,
        "type": "Mango"
      },
      {
        "pre_120": 50,
        "pre_90": 30,
        "pre_60": 45,
        "post_60": 90,
        "post_90": 140,
        "post_120": 190,
        "type": "Apple"
      }
    ]
  },
  "transform": [
    {"fold": ["pre_120", "pre_90", "pre_60", "post_60", "post_90", "post_120"]}
  ],
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": {
          "field": "key",
            "bandPosition": 0,
            "axis":{ "bandPosition":0, "labelOffset":-55},

          "sort": [
            "pre_120",
            "pre_90",
            "pre_60",
            "0",
            "post_60",
            "post_90",
            "post_120"
          ],
          "scale": {
            "domain": [
              "pre_120",
              "pre_90",
              "pre_60",
              "0",
              "post_60",
              "post_90",
              "post_120"
            ]
          }
        },
        "y": {"field": "value", "type": "quantitative"},
        "color": {"field": "type", "type": "nominal"}
      }
    },
    {
      "mark": {
        "type": "rule",
        "color": "maroon",
        "size": 3,
        "strokeDash": [6, 4]
      },
      "encoding": {"x": {"datum": "0", "bandPosition": 0}}
    }
  ]
}