Help

Upcoming database upgrades. to improve our reliability at 03:30 UTC on Feb. 25 / 7:30pm PT on Feb. 24. Some users may briefly experience slow load times or error messages. Learn more here

Vega-lite grouped bar

456 1
cancel
Showing results for 
Search instead for 
Did you mean: 

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

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

1 Reply 1

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.