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:
With something like dygraphs, the solution would be to pass valueRange: [-3, 3]
as an option. Here's the resulting graph:
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:
Setting
{
encoding: {
y: {
scale: {
domainMin: -3,
domainMax: 3,
clamp: true
}
}
}
}
gets me closer to what I want (playground):
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:
How can I produce a chart with a clipped y-axis range in VegaLite?
Use clip true and a size on your document.
{
"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": [
]
}