How to use Data Studio bindings in a Vega chart code table?

Question

I would like to implement an example of RoseWid chart in Data Studio using the Vega community visualization, using this great code from Stan Nowak. Once adapted for the Vega plugin, it looks like this:

    {"$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 400,
  "height": 400,
  "data": [
    {
      "name": "table",
      "values": [
        {"g": "1", "c": 0, "r": 11},
        {"g": 1, "c": 1, "r": 22},
        {"g": 1, "c": 2, "r": 13},
        {"g": 2, "c": 0, "r": 24},
        {"g": 2, "c": 1, "r": 35},
        {"g": 2, "c": 2, "r": 36},
        {"g": 3, "c": 0, "r": 42},
        {"g": 3, "c": 1, "r": 32},
        {"g": 3, "c": 2, "r": "32"},
        {"g": 4, "c": 0, "r": 6},
        {"g": 4, "c": 1, "r": 27},
        {"g": 4, "c": 2, "r": 16},
        {"g": 5, "c": 0, "r": 52},
        {"g": 5, "c": 1, "r": 79},
        {"g": 5, "c": 2, "r": 38},
        {"g": 6, "c": 0, "r": 19},
        {"g": 6, "c": 1, "r": 83},
        {"g": 6, "c": 2, "r": 3}
      ]
    },
    {
      "name": "angles",
      "source": "table",
      "transform": [
        {"type": "aggregate", "groupby": ["g"]},
        {"type": "pie"}
      ]
    },{
      "name": "stack",
      "source": "table",
      "transform": [
        {"type": "stack", "groupby": ["g"], "sortby": ["c"], "field": "r"},
        {"type": "lookup", "from": "angles", "key": "g", "fields": ["g"], "as": ["obj"]}
      ]
    }
  ],
  "scales": [
    {
      "name": "color",
      "type": "linear",
      "domain": {"data": "stack", "field": "c"},
      "range": {"scheme": "redyellowgreen"}
    },
    {
      "name": "r",
      "type": "sqrt",
      "domain": {"data": "table", "field": "y"},
      "range": [20, 200]
    }
  ],
  "marks": [
    {
      "type": "arc",
      "from": {"data": "stack"},
      "encode": {
        "enter": {
          "x": {"field": {"group": "width"}, "mult": 0.5},
          "y": {"field": {"group": "height"}, "mult": 0.5},
          "startAngle": {"data": "table", "field": "obj.startAngle"},
          "endAngle": {"data": "table", "field": "obj.endAngle"},
          "innerRadius": {"field": "y0"},
          "outerRadius": {"field": "y1"},
          "stroke": {"value": "black"}
        },
        "update": {"fill": {"scale": "color", "field": "c"}},
        "hover": {"fill": {"value": "red"}}
      }
    }
  ],
  "config": {}
}

The dataset has beed arranged in datastudio to have the same structure as the provided sample table ( with 3 columns with the same structure as the inline table). However I´m stuck on how to replace the table with the Data Studio bindings (namely, $dimension0, $dimension1 and $metric0)¨.

So far I tried:

 "data": [
        {
          "name": "table",
          "values": ["$dimension0","$dimension1","$metric0"],
          "as": ["g","c","r"]
},
....

and some variations on this, all to no result. The visualization keeps blank and there´s little information on what is failing.

Any help would be greatly appreciated.

EDIT : Here's a google sheet that is reproducing the same structure as the table in the inline code, which would be used as data for the Data Studio, and you can find an example of the working visualization & attempts to solve here

Answer 1

I have come across the same issue and managed to solve this after so many trial-and-errors.

To bind with data studio, you have to name your data as "default" and you can simply rename the fields by transforming with "type" : "project" in Vega.

 "data": [
        {
          "name": "default",
          "transform" : [{ "type" : "project",
                          "fields" : ["$dimension0","$dimension1","$metric0"],
                          "as": ["g","c","r"]}
          ]
},
....

Answer 2

First of all, there is an error in your example Vega source: stack transform does not have "sortby". Instead, specify "sort":

   "sort": { "field": ["c"],
              "order": ["ascending"]
    },

View example in Vega online editor

See Vega documentation for stack and compare:

For Google Data Studio, I have no experience using it but at the "Visualizations" web page, there are examples of using Vega in Data Studio: "Data Studio Vega Viz" by Jerry Chen

Based on his examples, "$dimension0","$dimension1" and "$metric0" can be used directly as Vega data fields.

Your question is how to use the Vega source that already has field names "g", "c" and "r". One way is to globally replace all "g", "c" and "r" with "$dimension0","$dimension1" and "$metric0" as shown in Jerry Chen's examples.

An alternative approach is to create formula fields "g", "c" and "r" as substitutes for "$dimension0","$dimension1" and "$metric0" as shown below. If this works then it is a general solution for converting any existing Vega spec to Google Data Studio and also for retaining meaningful field names in the Vega spec.

   "data": [
      { "name": "table",
        
        "transform": [
          {
            "type": "formula",
            "as": "g",
            "expr": "datum['$dimension0']"
          },
          {
            "type": "formula",
            "as": "c",
            "expr": "datum['$dimension1']"
          },
          {
            "type": "formula",
            "as": "r",
            "expr": "datum['$metric0']"
          }
        ]
    },
  
      {
          "name": "angles",
          "source": "table",
          "transform": [
            {"type": "aggregate", "groupby": ["g"]},
            {"type": "pie"}
          ]
        }
    ... etc