After modifying the minimum and maximum values of my y-axis in a bar chart visual, the animation of growing bars broke and now looks strange. I tried adjusting the parameters of the signal but haven't managed to achieve the desired smoothness. I just want the animation to be smooth without any sudden changes.
Here is the link to the sample file: https://github.com/tomecsek21/pbix_file
The upper visual represents the desired state I would like to achieve in the lower one. Does anyone have any ideas?
Try this.
If you want to get more advanced, there are easing functions described here by Madison:
https://github.com/Giammaria/Vega-Visuals?tab=readme-ov-file#easing-functions-visualized
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"height": 300,
"width": 700,
"data": [
{
"name": "table",
"values": [
{"day": "1", "value": 41200},
{"day": "2", "value": 39200},
{"day": "3", "value": 40800},
{"day": "4", "value": 39500},
{"day": "5", "value": 38700}
],
"transform": [
{
"type": "joinaggregate",
"fields": ["value", "value"],
"ops": ["max", "min"],
"as": ["max_value", "min_value"]
},
{"type": "formula", "expr": "datum.max_value*1.05", "as": "maximum"},
{"type": "formula", "expr": "datum.min_value*0.95", "as": "minimum"}
]
}
],
"signals": [
{"name": "a", "update": "data('table')[1]['minimum']"},
{
"name": "increment",
"update": "a",
"on": [{"events": "timer{25}", "update": "increment + 250"}]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "day"},
"range": "width"
},
{
"name": "yscale",
"type": "linear",
"domain": {"data": "table", "fields": ["minimum", "maximum"]},
"range": "height",
"zero": false
}
],
"axes": [
{
"orient": "left",
"scale": "yscale",
"tickCount": 5,
"grid": true,
"gridDash": [1, 3]
},
{"orient": "bottom", "scale": "xscale"}
],
"marks": [
{
"type": "rect",
"name": "potential",
"from": {"data": "table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "day", "band": 0.35, "offset": -2},
"width": {"value": 40},
"fill": {"value": "#363636"}
},
"update": {
"y": {"scale": "yscale", "field": "minimum"},
"y2": {
"signal": "increment<=datum.value? scale('yscale',increment): scale('yscale',datum.value)"
}
}
}
}
]
}