data-visualizationlooker-studiovega-litevegadata-studio-custom-visuals

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


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


Solution

  • 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"]}
              ]
    },
    ....