Using Vega Lite to display already-aggregated data

Question

I'm trying to show a stacked bar chart of sums over time. The data looks something like this:

[
  {
    "date": 12345,
    "sumA": 100,
    "sumB": 150
  },
  ...
]

I'm encoding the x axis to the field "date". I need the bar at date 12345 to be stacked with one part being 100 high, and the other, shown in another color, being 150 high.

Vega Lite seems to expect the raw data, but this would be too slow. I do this aggregate on the server side to save time. Can I spoon-feed Vega Lite the aggregates like in my example above?

Answer 1

You can use the fold transform to fold your two columns into one, and then the channel encodings take care of the rest. For example (vega editor):

{
  "data": {
    "values": [
      {"date": 1, "sumA": 100, "sumB": 150},
      {"date": 2, "sumA": 200, "sumB": 50},
      {"date": 3, "sumA": 80,  "sumB": 120},
      {"date": 4, "sumA": 120, "sumB": 30},
      {"date": 5, "sumA": 150, "sumB": 110}
    ]
  },
  "transform": [
    {"fold": ["sumA", "sumB"], "as": ["column", "value"]}
  ],
  "mark": {"type": "bar"},
  "encoding": {
    "x": {"type": "ordinal", "field": "date"},
    "y": {"type": "quantitative", "field": "value"},
    "color": {"type": "nominal", "field": "column"}
  }
}