Vega-lite grouped bar

jarvis1 · ‎Apr 07, 2022

Hi

I would like to add advanced graphs to my base using the vega-lite app. However, it looks like the app doens’t support all features from vega-lite. For example, I’m unable to

use parameters
create grouped bar chart

I tried using example code from the vega-lite app, see below. But the result it different. On the website I get a chart with the bar located next to each other. But in the app the bars are placed on top of each other.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": "container",
  "height": "container",
  "data": {
    "values": [
      {"category":"A", "group": "x", "value":0.1},
      {"category":"A", "group": "y", "value":0.6},
      {"category":"A", "group": "z", "value":0.9},
      {"category":"B", "group": "x", "value":0.7},
      {"category":"B", "group": "y", "value":0.2},
      {"category":"B", "group": "z", "value":1.1},
      {"category":"C", "group": "x", "value":0.6},
      {"category":"C", "group": "y", "value":0.1},
      {"category":"C", "group": "z", "value":0.2}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "category", "type": "nominal"},
    "y": {"field": "value", "type": "quantitative"},
    "xOffset": {"field": "group", "type": "nominal"},
    "color": {"field": "group", "type": "nominal"}
  }
}

I can use a layered solution as proposed by others. However, I don’t really like this solution as the bar location is now defined by the xoffset and size attributes. This works if the nr of datapoints on the x-axis is constant, which is not the case in my situation. Therefore I have to update the values everytime the values change.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": "container",
  "height": "container",
  "data": {
    "values": [
      {"category":"A", "group": "x", "valuea":0.1, "valueb":0.3, "valuec":0.1},
      {"category":"A", "group": "y", "valuea":0.6, "valueb":0.1, "valuec":0.2},
      {"category":"A", "group": "z", "valuea":0.9, "valueb":0.4, "valuec":0.3},
      {"category":"B", "group": "x", "valuea":0.1, "valueb":0.4, "valuec":0.4},
      {"category":"B", "group": "y", "valuea":0.3, "valueb":0.5, "valuec":0.5},
      {"category":"B", "group": "z", "valuea":0.2, "valueb":0.6, "valuec":0.5},
      {"category":"C", "group": "x", "valuea":0.1, "valueb":0.1, "valuec":0.1},
      {"category":"C", "group": "y", "valuea":0.1, "valueb":0.2, "valuec":0.2},
      {"category":"C", "group": "z", "valuea":0.3, "valueb":0.6, "valuec":0.3}
    ]
  },
  "encoding": {
    "x": {"field": "category", "type": "nominal"}
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "xOffset": -12,
        "size": 10
      },
      "encoding": {
        "y": {
          "field": "valuea",
          "aggregate": "sum",
          "type": "quantitative"
        },
        "color": {
          "field": "group",
          "type": "nominal"
        }
      }
    },
    {
      "mark": {
        "type": "bar",
        "size": 10,
        "xOffset": 0
      },
      "encoding": {
        "y": {
          "field": "valueb",
          "aggregate": "sum",
          "type": "quantitative"
        },
        "color": {
          "field": "group",
          "type": "nominal"
        }
      }
    },
    {
      "mark": {
        "type": "bar",
        "size": 10,
        "xOffset": 12
      },
      "encoding": {
        "y": {
          "field": "valuec",
          "aggregate": "sum",
          "type": "quantitative"
        },
        "color": {
          "field": "group",
          "type": "nominal"
        }
      }
    }
  ]
}

Is there any plan to update the vega-lite app to support these functionalities?

Best
Jarvis

Bill_French · ‎Apr 07, 2022

Probably not - these are the limits baked into the “beta” app. You are free, however, to create your own custom app that supports far greater capabilities with Vega-Lite (and Vega for that matter).

Charting and data visualization cul-de-sacs are ill-advised; Airtable has two of them. The chart app is woefully inept and the Vega-Lite app assumes they know that you care only about flattened data for charting purposes. This is why the “data” node is ineffective in the examples you show. Ideally, the data node should be able to be replaced with script allowing far more flexibility.

I applaud Airtable for experimenting with the Vega-Lite app and publishing the source on GitHub so anyone (with coding experience) may extend it.