Search code examples
vega-lite

i want to use repeat and provide different values to certain properties depending on the value of repeat

I'm wondering if it's possible to check what is inside the current iteration (I consider repeat being an iteration)?

My code

{ "height": {"step": 40},
  "width": 200,
  "params": [
  ],
  "data":
    {
      "name": "thedata",
      "values": [
        {"region": "Europe" , "Act": 11000, "PY": 9000, "Plan": 10000},
        {"region": "Asia" , "Act": 17000, "PY": 16000, "Plan": 18000},
        {"region": "Americas" , "Act": 19000, "PY": 14000, "Plan": 12000},
        {"region": "Australia" , "Act": 13000, "PY": 14000, "Plan": 12000}
      ]
    },

    "repeat": {
      "layer": ["Act", "PY"]
    },

    "spec":
      { 
        "mark": {
          "type": "bar",
          "fillOpacity": 1,
          "height": {"band": 0.7}
        },
        "encoding": {
          "y": { "field": "region", "type": "nominal",
            "sort": {"field": "Act", "order": "descending"}
          },
          "yOffset": {"value":-5},
          "x": {
            "field": {"repeat": "layer"}, "type": "quantitative", "axis": {"grid": false}},
          "color": {"value": {"expr": "repeat === 'Act' ? 'black': 'red'"}}
        }
      }
      
      /*,
      { "name": "back column",
        "mark": {
          "type": "bar",
          "fillOpacity": 1,
          "height": {"band": 0.7}
        },
        "encoding": {
          "y": {
            
            "sort": {"field": "Act", "order": "descending"}
          },
          "yOffset": {"value": 5},
          "x": {"field": "PY", "type": "quantitative"},
          "color": {"value": "black"}
        }
      }
      */
    
}

I want to provide a different color, not just a color but this is my starting point, to the rect depending on the current column (the value of the repeat iteration).

I can do what I want using layers, because this is only a fraction I want to use repeat because I will have less code.

Solution

  • I don't think is supported - Some open issues exist in github requesting more functionality here.

    Github issue

    Why not consider a fold transform? This is the perfect case for such a transform.

    enter image description here

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "height": {"step": 40},
  "width": 200,
  "params": [],
  "data": {
    "name": "thedata",
    "values": [
      {"region": "Europe", "Act": 11000, "PY": 9000, "Plan": 10000},
      {"region": "Asia", "Act": 17000, "PY": 16000, "Plan": 18000},
      {"region": "Americas", "Act": 19000, "PY": 14000, "Plan": 12000},
      {"region": "Australia", "Act": 13000, "PY": 14000, "Plan": 12000}
    ]
  },
  "transform": [{"fold": ["Act", "PY"]}],
  "mark": {
    "type": "bar",
    "fillOpacity": 1,
    "height": {"expr": "datum.key === 'Act' ? 30: 20"}
  },
  "encoding": {
    "y": {"field": "region", "type": "nominal"},
    "x": {"field": "value", "type": "quantitative", "stack": null},
    "color": {"value": {"expr": "datum.key === 'Act' ? 'black': 'red'"}},
    "order": {"field": "key", "sort": "ascending"}
  }
}