CODEWITHSUNDEEP
vega-lite
woolyninja
woolyninja

Reputation: 762

Vega-Lite Binned Line Chart

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/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<div id="vis"></div>

Upvotes: 0

Views: 365

Answers (2)

hk7math
hk7math

Reputation: 297

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"]},
  },
  1. 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 }
  },

Upvotes: 1

wahab memon
wahab memon

Reputation: 2416

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"}
  }
}

Upvotes: 1

Related Questions