Vega-Lite Binned Line Chart

Question

I'm currently loving Vega-Lite but I'm running into an issue and while I've tried a lot of different things I can't seem to figure it out.

Is there a way to get the following Vega-Lite chart to have the line start and end at the edges instead of starting/ending in the middle of the bin?

 const data = [ { "start_time": "2021-07-10T00:00:00Z", "end_time": "2021-07-10T01:00:00Z", "value": 30 }, { "start_time": "2021-07-10T01:00:00Z", "end_time": "2021-07-10T02:00:00Z", "value": 100 }, { "start_time": "2021-07-10T02:00:00Z", "end_time": "2021-07-10T03:00:00Z", "value": 190 }, { "start_time": "2021-07-10T03:00:00Z", "end_time": "2021-07-10T04:00:00Z", "value": 120 }, { "start_time": "2021-07-10T04:00:00Z", "end_time": "2021-07-10T05:00:00Z", "value": 70 }, { "start_time": "2021-07-10T05:00:00Z", "end_time": "2021-07-10T06:00:00Z", "value": 60 }, { "start_time": "2021-07-10T06:00:00Z", "end_time": "2021-07-10T07:00:00Z", "value": 33 }, { "start_time": "2021-07-10T07:00:00Z", "end_time": "2021-07-10T08:00:00Z", "value": 127 }, { "start_time": "2021-07-10T08:00:00Z", "end_time": "2021-07-10T09:00:00Z", "value": 200 }, { "start_time": "2021-07-10T09:00:00Z", "end_time": "2021-07-10T10:00:00Z", "value": 50 }, { "start_time": "2021-07-10T10:00:00Z", "end_time": "2021-07-10T11:00:00Z", "value": 60 }, { "start_time": "2021-07-10T11:00:00Z", "end_time": "2021-07-10T12:00:00Z", "value": 70 }, { "start_time": "2021-07-10T12:00:00Z", "end_time": "2021-07-10T13:00:00Z", "value": 80 }, { "start_time": "2021-07-10T13:00:00Z", "end_time": "2021-07-10T14:00:00Z", "value": 90 }, { "start_time": "2021-07-10T14:00:00Z", "end_time": "2021-07-10T15:00:00Z", "value": 100 }, { "start_time": "2021-07-10T15:00:00Z", "end_time": "2021-07-10T16:00:00Z", "value": 22 }, { "start_time": "2021-07-10T16:00:00Z", "end_time": "2021-07-10T17:00:00Z", "value": 190 }, { "start_time": "2021-07-10T17:00:00Z", "end_time": "2021-07-10T18:00:00Z", "value": 37 }, { "start_time": "2021-07-10T18:00:00Z", "end_time": "2021-07-10T19:00:00Z", "value": 33 }, { "start_time": "2021-07-10T19:00:00Z", "end_time": "2021-07-10T20:00:00Z", "value": 150 }, { "start_time": "2021-07-10T20:00:00Z", "end_time": "2021-07-10T21:00:00Z", "value": 170 }, { "start_time": "2021-07-10T21:00:00Z", "end_time": "2021-07-10T22:00:00Z", "value": 130 }, { "start_time": "2021-07-10T22:00:00Z", "end_time": "2021-07-10T23:00:00Z", "value": 200 }, { "start_time": "2021-07-10T23:00:00Z", "end_time": "2021-07-10T24:00:00Z", "value": 55 } ]; const spec = { "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "autosize": { "type": "fit", "resize": true, "contains": "content" }, "height": 150, "width": "container", "data": { "values": data }, "mark": { "type": "line", "point": true }, "encoding": { "x": { "field": "start_time", "bin": { "binned": true }, "type": "temporal", "title": "Time" }, "x2": { "field": "end_time" }, "y": { "field": "value", "type": "quantitative", "title": "Count" } } }; vegaEmbed('#vis', spec);

 #vis { width: 100%; }

 <script src="https://cdn.jsdelivr.net/npm/vega@5.20.2"></script> <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.0.0"></script> <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.18.2"></script> <div id="vis"></div>

Answer 1

There are at least 2 ways to do so as far as I know:

1. Band : Adding bandPosition in x encoding (easier as designed) See Vega Editor

  "x": {
    ...,
    "bandPosition": 0,
    "scale": { "domain": ["2021-07-10T00:00:00Z", "2021-07-10T23:00:00Z"]},
  },

2. Axis : Adding tickOffset and labelOffset in axis of x encoding (ticks/labels are separated and more controllable in terms of px) See Vega Editor

  "x": {
    ...,
    "axis": { "tickOffset": 10, "labelOffset": 10 }
  },

Answer 2

You can give padding in scale of x-axis, with that you will be able to remove spacing. There are other configs like innerPadding which you can check in documentation. But padding seemed to work. Also noticed that by removing the x2 encoding gave the same result of start/end connecting with edge. Refer the editor and snipped below:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "autosize": {"type": "fit", "resize": true, "contains": "content"},
  "height": 150,
  "width": "container",
  "data": {
    "values": [
      {
        "start_time": "2021-07-10T00:00:00Z",
        "end_time": "2021-07-10T01:00:00Z",
        "value": 30
      },
      {
        "start_time": "2021-07-10T01:00:00Z",
        "end_time": "2021-07-10T02:00:00Z",
        "value": 100
      },
      {
        "start_time": "2021-07-10T02:00:00Z",
        "end_time": "2021-07-10T03:00:00Z",
        "value": 190
      },
      {
        "start_time": "2021-07-10T03:00:00Z",
        "end_time": "2021-07-10T04:00:00Z",
        "value": 120
      },
      {
        "start_time": "2021-07-10T04:00:00Z",
        "end_time": "2021-07-10T05:00:00Z",
        "value": 70
      },
      {
        "start_time": "2021-07-10T05:00:00Z",
        "end_time": "2021-07-10T06:00:00Z",
        "value": 60
      },
      {
        "start_time": "2021-07-10T06:00:00Z",
        "end_time": "2021-07-10T07:00:00Z",
        "value": 33
      },
      {
        "start_time": "2021-07-10T07:00:00Z",
        "end_time": "2021-07-10T08:00:00Z",
        "value": 127
      },
      {
        "start_time": "2021-07-10T08:00:00Z",
        "end_time": "2021-07-10T09:00:00Z",
        "value": 200
      },
      {
        "start_time": "2021-07-10T09:00:00Z",
        "end_time": "2021-07-10T10:00:00Z",
        "value": 50
      },
      {
        "start_time": "2021-07-10T10:00:00Z",
        "end_time": "2021-07-10T11:00:00Z",
        "value": 60
      },
      {
        "start_time": "2021-07-10T11:00:00Z",
        "end_time": "2021-07-10T12:00:00Z",
        "value": 70
      },
      {
        "start_time": "2021-07-10T12:00:00Z",
        "end_time": "2021-07-10T13:00:00Z",
        "value": 80
      },
      {
        "start_time": "2021-07-10T13:00:00Z",
        "end_time": "2021-07-10T14:00:00Z",
        "value": 90
      },
      {
        "start_time": "2021-07-10T14:00:00Z",
        "end_time": "2021-07-10T15:00:00Z",
        "value": 100
      },
      {
        "start_time": "2021-07-10T15:00:00Z",
        "end_time": "2021-07-10T16:00:00Z",
        "value": 22
      },
      {
        "start_time": "2021-07-10T16:00:00Z",
        "end_time": "2021-07-10T17:00:00Z",
        "value": 190
      },
      {
        "start_time": "2021-07-10T17:00:00Z",
        "end_time": "2021-07-10T18:00:00Z",
        "value": 37
      },
      {
        "start_time": "2021-07-10T18:00:00Z",
        "end_time": "2021-07-10T19:00:00Z",
        "value": 33
      },
      {
        "start_time": "2021-07-10T19:00:00Z",
        "end_time": "2021-07-10T20:00:00Z",
        "value": 150
      },
      {
        "start_time": "2021-07-10T20:00:00Z",
        "end_time": "2021-07-10T21:00:00Z",
        "value": 170
      },
      {
        "start_time": "2021-07-10T21:00:00Z",
        "end_time": "2021-07-10T22:00:00Z",
        "value": 130
      },
      {
        "start_time": "2021-07-10T22:00:00Z",
        "end_time": "2021-07-10T23:00:00Z",
        "value": 200
      },
      {
        "start_time": "2021-07-10T23:00:00Z",
        "end_time": "2021-07-10T24:00:00Z",
        "value": 55
      }
    ]
  },
  "mark": {"type": "line", "point": true},
  "encoding": {
    "x": {
      "field": "start_time",
      "bin": {"binned": true},
      "scale": {"padding": "-8"},
      "type": "temporal",
      "title": "Time"
    },
    "x2": {"field": "end_time"},
    "y": {"field": "value", "type": "quantitative", "title": "Count"}
  }
}