Vega Lite - Animated bar charts without looping PART2 (actually VEGA)

Question

I've almost found a workaround that achieves the desired result. However, there's one thing I'm still struggling to resolve — it might not be too difficult, but I'm getting used to Vega, which is a bit different from Vega Lite.

Currently, the bars grow from 0 to 4000, using a hard-coded value that should be replaced with the dynamic value corresponding to each bar.

Below is the signal that needs to be modified to dynamically store the corresponding value of each bar instead of using hard-coded value (lines 5-8 in the code):

{
"name": "ceiling_value",
"value": 4000
}

Afterwards the signal is passed to the clamp function which determines the minimum and maximum range of the bar:

{          
"type": "formula",
"as": "value",
"expr": "clamp(datum['zero_measure'] + increment, 0, ceiling_value)"
}

Complete code:

{
  "width": 200,
  "height": 220,
  "signals": [
    {
      "name": "ceiling_value",
      "value": 4000
    },
    {
      "name": "increment",
      "value": 1,
      "on": [
        {
          "events": "timer{70}",
          "update": "increment + 500"
        }
      ]
    }
  ],
  "data": [
    {
      "name": "table",
      "values": [
        {"day": "1", "value": 2200,"zero_measure": 0},
        {"day": "2", "value": 3200,"zero_measure": 0},
        {"day": "3", "value": 1800,"zero_measure": 0},
        {"day": "4", "value": -1500,"zero_measure": 0},
        {"day": "5", "value": 700,"zero_measure": 0}
      ],

      "transform": [
        {
          "type": "formula",
          "as": "day",
          "expr": "datum['day']"
        },
        {
          "type": "formula",
          "as": "value",
          "expr": "clamp(datum['zero_measure'] + increment, 0, ceiling_value)"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": {
        "data": "table",
        "field": "day"
      },
      "range": "width"
    },
    {
      "name": "yscale",
      "type": "linear",
      "domain": [0, 6000],
      "range": "height"
    }
  ],
  "axes": [
    {
      "orient": "left",
      "scale": "yscale"
    },
    {
      "orient": "bottom",
      "scale": "xscale"
    }
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "x": {
            "scale": "xscale",
            "field": "day"
          },
          "width": {
            "scale": "xscale",
            "band": 0.8,
            "offset": -1
          },
          "fill": {
            "value": "steelblue"
          },
          "cornerRadius": {"value": 4}
        },
        "update": {
          "y": {
            "scale": "yscale",
            "field": "value"
          },
          "y2": {
            "scale": "yscale",
            "value": 0
          }
        }
      }
    }
  ]
}

Could anyone help please? Thanks a lot! (Namely thanks to Davide who is always willing to help :) )

Answer 1

You should be able to adapt this.

{
  "width": 200,
  "height": 220,
  "signals": [
    
    {
      "name": "increment",
      "value": 1,
      "on": [{"events": "timer{70}", "update": "increment + 500"}]
    }
  ],
  "data": [
    {
      "name": "table",
      "values": [
        {"day": "1", "value": 2200, "zero_measure": 0},
        {"day": "2", "value": 3200, "zero_measure": 0},
        {"day": "3", "value": 1800, "zero_measure": 0},
        {"day": "4", "value": 1500, "zero_measure": 0},
        {"day": "5", "value": 700, "zero_measure": 0}
      ],
      "transform": [
        {"type": "formula", "as": "day", "expr": "datum['day']"}
          ]
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": {"data": "table", "field": "day"},
      "range": "width"
    },
    {"name": "yscale", "type": "linear", "domain": [0, 6000], "range": "height"}
  ],
  "axes": [
    {"orient": "left", "scale": "yscale"},
    {"orient": "bottom", "scale": "xscale"}
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "day"},
          "width": {"scale": "xscale", "band": 0.8, "offset": -1},
          "fill": {"value": "steelblue"},
          "cornerRadius": {"value": 4}
        },
        "update": {
          "y": {"scale": "yscale", "value": 0},
          "y2": {"signal": "increment<=datum.value? scale('yscale',increment):scale('yscale',datum.value)"}
        }
      }
    }
  ]
}