CODEWITHSUNDEEP
linechartvega-litevega
peetonn
peetonn

Reputation: 3052

How to draw areas on line chart in Vega-Lite?

The data I use for line chart carries property that identifies to which area it belongs (nominal type). I'd like to plot a single line for the data, but add colored shading showing different areas (area designation is continuous throughout data, i.e. it is not possible to have data points like this: area1, area1, area2, area1). Here's the spec and chart in Vega editor:

{
  "mark": "line",
  "data": {
    "values": [
      {
        "timestamp": 0,
        "area": 1,
        "value": 39.005653381347656,
        "series": "data1"
      },
      {
        "timestamp": 127,
        "area": 1,
        "value": 39.005653381347656,
        "series": "data1"
      },
      {
        "timestamp": 163,
        "area": 1,
        "value": 39.001007080078125,
        "series": "data1"
      },
      {
        "timestamp": 1001,
        "area": 1,
        "value": 39.001007080078125,
        "series": "data1"
      },
      {
        "timestamp": 1144,
        "area": 1,
        "value": 39.001007080078125,
        "series": "data1"
      },
      {
        "timestamp": 1361,
        "area": 1,
        "value": 39.68376922607422,
        "series": "data1"
      },
      {
        "timestamp": 2000,
        "area": 1,
        "value": 39.68376922607422,
        "series": "data1"
      },
      {
        "timestamp": 2161,
        "area": 1,
        "value": 39.68376922607422,
        "series": "data1"
      },
      {
        "timestamp": 2561,
        "area": 1,
        "value": 39.18102264404297,
        "series": "data1"
      },
      {
        "timestamp": 3004,
        "area": 1,
        "value": 39.18102264404297,
        "series": "data1"
      },
      {
        "timestamp": 3161,
        "area": 1,
        "value": 39.18102264404297,
        "series": "data1"
      },
      {
        "timestamp": 3760,
        "area": 1,
        "value": 39.0322151184082,
        "series": "data1"
      },
      {
        "timestamp": 4006,
        "area": 4,
        "value": 39.0322151184082,
        "series": "data1"
      },
      {
        "timestamp": 4179,
        "area": 4,
        "value": 39.0322151184082,
        "series": "data1"
      },
      {
        "timestamp": 4960,
        "area": 4,
        "value": 39.005733489990234,
        "series": "data1"
      },
      {
        "timestamp": 5001,
        "area": 4,
        "value": 39.005733489990234,
        "series": "data1"
      },
      {
        "timestamp": 5192,
        "area": 4,
        "value": 39.005733489990234,
        "series": "data1"
      },
      {
        "timestamp": 6001,
        "area": 4,
        "value": 39.005733489990234,
        "series": "data1"
      },
      {
        "timestamp": 6160,
        "area": 4,
        "value": 38.42289733886719,
        "series": "data1"
      },
      {
        "timestamp": 6209,
        "area": 4,
        "value": 38.42289733886719,
        "series": "data1"
      }
    ]
  },
  "encoding": {
    "x": {
      "field": "timestamp",
      "type": "quantitative"
    },
    "y": {
      "field": "value",
      "type": "quantitative",
      "title": "statistic"
    },
    "color": {
      "field": "series",
      "type": "nominal"
    }
  },
  "width": 900,
  "height": 400,
  "config": {
    "axis": {
      "grid": true,
      "gridColor": "#dedede"
    }
  },
  "background": "#ffffff"
}

Update Here's what I'm trying to achieve: enter image description here

Upvotes: 1

Views: 380

Answers (1)

davidebacci
davidebacci

Reputation: 30219

enter image description here

{
  "data": {
    "values": [
      {
        "timestamp": 0,
        "area": 1,
        "value": 39.005653381347656,
        "series": "data1"
      },
      {
        "timestamp": 127,
        "area": 1,
        "value": 39.005653381347656,
        "series": "data1"
      },
      {
        "timestamp": 163,
        "area": 1,
        "value": 39.001007080078125,
        "series": "data1"
      },
      {
        "timestamp": 1001,
        "area": 1,
        "value": 39.001007080078125,
        "series": "data1"
      },
      {
        "timestamp": 1144,
        "area": 1,
        "value": 39.001007080078125,
        "series": "data1"
      },
      {
        "timestamp": 1361,
        "area": 1,
        "value": 39.68376922607422,
        "series": "data1"
      },
      {
        "timestamp": 2000,
        "area": 1,
        "value": 39.68376922607422,
        "series": "data1"
      },
      {
        "timestamp": 2161,
        "area": 1,
        "value": 39.68376922607422,
        "series": "data1"
      },
      {
        "timestamp": 2561,
        "area": 1,
        "value": 39.18102264404297,
        "series": "data1"
      },
      {
        "timestamp": 3004,
        "area": 1,
        "value": 39.18102264404297,
        "series": "data1"
      },
      {
        "timestamp": 3161,
        "area": 1,
        "value": 39.18102264404297,
        "series": "data1"
      },
      {
        "timestamp": 3760,
        "area": 1,
        "value": 39.0322151184082,
        "series": "data1"
      },
      {
        "timestamp": 4006,
        "area": 4,
        "value": 39.0322151184082,
        "series": "data1"
      },
      {
        "timestamp": 4179,
        "area": 4,
        "value": 39.0322151184082,
        "series": "data1"
      },
      {
        "timestamp": 4960,
        "area": 4,
        "value": 39.005733489990234,
        "series": "data1"
      },
      {
        "timestamp": 5001,
        "area": 4,
        "value": 39.005733489990234,
        "series": "data1"
      },
      {
        "timestamp": 5192,
        "area": 4,
        "value": 39.005733489990234,
        "series": "data1"
      },
      {
        "timestamp": 6001,
        "area": 4,
        "value": 39.005733489990234,
        "series": "data1"
      },
      {
        "timestamp": 6160,
        "area": 4,
        "value": 38.42289733886719,
        "series": "data1"
      },
      {
        "timestamp": 6209,
        "area": 4,
        "value": 38.42289733886719,
        "series": "data1"
      }
    ]
  },
  "encoding": {
    "x": {"field": "timestamp", "type": "quantitative"},
    "y": {"field": "value", "type": "quantitative", "title": "statistic"},
    "color": {"field": "series", "type": "nominal"}
  },
  "layer": [
    {"mark": "line"},
    {
      "mark": {"type": "rect", "opacity": 0.2},
      "encoding": {
        "x": {"field": "timestamp", "aggregate": {"argmax": "timestamp"}, "axis":{"title":""} },
        "x2": {"field": "timestamp", "aggregate": {"argmin": "timestamp"}},
        "y": {"value": 0},
        "color": {"field": "area", "type": "nominal"}
      
       
      
      }
    }
  ],
  "width": 900,
  "height": 400,
  "config": {"axis": {"grid": true, "gridColor": "#dedede"}},
  "background": "#ffffff"
}

Upvotes: 1

Related Questions