Forum Discussion
Dynamic y-Axis calculation with Deneb
Hi distra,
The area mark is designed to have a zero baseline, so even if you cut the domain, it is trying to plot the remainder of the shape outside the domain (as the second y-value is zero). It would work with a line mark as there is only a single y-coordinate to worry about.
So, what is happening here is that your y-scale and axis are being correctly set to the desired range, but the size of your chart is condensing the vertical scale into the equivalent amount of space. You can see it "kind of" working if you make the visual container larger, e.g.:
(ignore the 'undefined'; that's a copy/paste issue with your sample data at my end)
One way to resolve this is to instruct Vega-Lite to clip the area mark. You should be able to make the following changes to your spec:
1. Update the scale as follows (removing "zero": false), e.g.:
{ ... "encoding": { "y": { "field": "Avg Rate dynamic Currency", "type": "quantitative", "scale": { "domain": [80, 235] // or whatever you need min/max to be }, ... }, ... } ... }2. Update the area mark definition to include a clip as follows:
{ ... "layer": [ { "description": "sparkline definition", "mark": { "type":"area", "clip": true }, ... }, ... } ... }This will now cut the baseline of the plotted area, e.g.:
Hopefully this should be all you need to resolve. Good luck!
(and thanks for using Deneb!)
Daniel
Daniel, you're my hero!
By replacing my existing min and max calculations with the proposed y_extents of my field
Thank you so much, have a good rest!
Glad it's working for you! It occurred to me (after some sleep) that you might be able to set the y2 encoding channel for the area mark to your derived minimum value from the join aggregate, which would minimize the number of moving parts. You would still need to set the y-scale's zero to false, but it works just as well without needing to apply the extents and expressions to the domain. Here's a quick revision using the above example:
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"data": {
"url": "data/stocks.csv"
},
"transform": [
{
"filter": "datum.symbol==='GOOG'"
},
{
"joinaggregate": [
{
"op": "min",
"field": "price",
"as": "min_price"
}
]
}
],
"mark": {
"type": "area"
},
"encoding": {
"x": {
"field": "date",
"type": "temporal"
},
"y": {
"field": "price",
"type": "quantitative",
"scale": {
"zero": false
}
},
"y2": {
"field": "min_price"
}
}
}And here it is in the Vega Editor.
Cheers,
Daniel
Thank you for further enhancing my understanding of the logic.
Since this was my first encounter with Deneb and Vega-Lite I yet have to make some big effort to fully understand the structure of it. But your comments and the link to the Vega-Editor to play around help a lot.
Thanks!