jsonvisualizationvega-lite

Zoom to y-axis range with time series in VegaLite


I have a time series with some outlier values around Covid. I'd like to zoom in to a particular y-axis range (say, -3 to +3) to de-emphasize those:

time series with spikes around Covid

With something like dygraphs, the solution would be to pass valueRange: [-3, 3] as an option. Here's the resulting graph:

dygraphs rendering with clipped y-axis

I want to accomplish something similar with VegaLite but I'm finding it surprisingly hard. I've tried a few things. First, setting { encoding: { y: { scale: { rangeMin: -3, rangeMax: 3 } } } } (playground). This completely breaks the chart:

time series with collapsed y-axis

Setting

{
  encoding: {
    y: {
      scale: {
        domainMin: -3,
        domainMax: 3,
        clamp: true
      }
    }
  }
}

gets me closer to what I want (playground):

chart with clamped outliers

Unfortunately, the clamping produces misleading flat sections on the chart that aren't reflective of the data. Removing the clamp here results in a totally blank chart.

I've also tried transforming the data to turn outliers into null and plotting that (playground):

{
  "transform": [
    {
      "as": "clippedValue",
      "calculate": "datum.value < -3 ? null : datum.value > 3 ? null : datum.value"
    }
  ]
}

This gets close to what I want, but it shows the time series ending before going above or below the y-axis range:

Chart with clipped outliers

How can I produce a chart with a clipped y-axis range in VegaLite?


Solution

  • Use clip true and a size on your document.

    enter image description here

    {
      "data": {
        "values": [
          {"date": "2018-03-30", "value": 0.79},
          {"date": "2018-06-29", "value": 0.39},
          {"date": "2018-09-28", "value": 0.31},
          {"date": "2018-12-28", "value": 0.01},
          {"date": "2019-03-22", "value": -0.56},
          {"date": "2019-06-28", "value": -0.88},
          {"date": "2019-09-27", "value": -1.32},
          {"date": "2019-12-20", "value": -1.34},
          {"date": "2020-02-28", "value": -1.01},
          {"date": "2020-03-06", "value": -1.24},
          {"date": "2020-03-13", "value": -1.38},
          {"date": "2020-04-17", "value": -5.23},
          {"date": "2020-04-24", "value": -5.36},
          {"date": "2020-05-01", "value": -6.69},
          {"date": "2020-06-12", "value": -5.87},
          {"date": "2020-07-17", "value": -3.29},
          {"date": "2020-08-14", "value": -1.89},
          {"date": "2020-09-11", "value": -1.05},
          {"date": "2020-10-23", "value": 0.17},
          {"date": "2020-12-04", "value": 1.82},
          {"date": "2020-12-11", "value": 2.01},
          {"date": "2020-12-18", "value": 2.16},
          {"date": "2020-12-25", "value": 2.35},
          {"date": "2021-01-22", "value": 2.4},
          {"date": "2021-02-26", "value": 2.15},
          {"date": "2021-04-02", "value": 2.65},
          {"date": "2021-05-07", "value": 4.94},
          {"date": "2021-06-11", "value": 7.03},
          {"date": "2021-07-16", "value": 2.62},
          {"date": "2021-08-20", "value": 2.32},
          {"date": "2021-10-22", "value": 1.39},
          {"date": "2021-12-03", "value": 1.27},
          {"date": "2022-01-28", "value": 0.83},
          {"date": "2022-03-11", "value": 0.61},
          {"date": "2022-03-18", "value": 0.54},
          {"date": "2022-03-25", "value": 0.5},
          {"date": "2022-05-13", "value": -0.03},
          {"date": "2022-05-20", "value": -0.08},
          {"date": "2022-07-22", "value": -0.45}
        ]
      },
      "layer": [
        {
          "name": "leftAxis",
          "layer": [
            {
              "mark": {"type": "line", "point": false, "strokeWidth": 1, "clip":true},
              "encoding": {
                "x": {"type": "temporal", "field": "date", "title": null},
                "y": {
                  "type": "quantitative",
                  "field": "value",
                  "scale": {
                    
                  "domain":[-3,3]
                  }
                }
              }
            }
          ]
        }
      ],
      "width": 500,
      "height": 300,
      "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
      "transform": [
    
      ]
    }