Search code examples
vegavincent

vega stacked bar syntax for "y2" field in properties


Can someone explain to me the following line in the vincent docs for a stacked bar:

https://github.com/wrobstory/vincent/blob/master/examples/stacked_bar_examples.py

y2=ValueRef(field='y2', scale='y')

I don't see any field called "y2" in the data set so I am confused as to where it is coming from


Solution

  • The y2 field is generated by the Vega stack transform (code here).

    In Vega, The rect mark can be defined by y+y2 or y+height. See Marks#Shared Visual Properties in Vega's docs:

    For marks involving Cartesian extents (e.g., rect marks), the horizontal dimensions are determined by (in order of precedence) the x and x2 properties, the x and width properties, and the x2 and width properties. If all three of x, x2 and width are specified, the width value is ignored. The y, y2 and height properties are treated similarly.

    Check out the stacked bar demo in the Vega Live Editor, which includes:

    ...
      "marks": [
        {
          "type": "rect",
          "properties": {
            "enter": {
              "x": {"scale": "x", "field": "data.x"},
              "width": {"scale": "x", "band": true, "offset": -1},
              "y": {"scale": "y", "field": "y"},
              "y2": {"scale": "y", "field": "y2"},
              "fill": {"scale": "color", "field": "data.c"}
            },
            "update": {
              "fillOpacity": {"value": 1}
            },
            "hover": {
              "fillOpacity": {"value": 0.5}
            }
          }
        }
      ]
    ...
    

    Try changing y2 with height in the live editor.