plot small multiples in vega-lite with gray background

Question

I'm looking for a vega-lite configuration to show small multiples (using the facet operator row or column) with all other data points greyed out in the background.

Here is an example plot using the facet-operator: facet plot

in vega-editor

"facet": {
        "row": {
          "field": "group",
          "type": "nominal"
        }
      },

And here is an example using multiple charts with the concat operator and color channel to grey out other groups: concat-plot

in vega-editor

"color": {"condition": {"test": "datum['group'] != 1", "value": "grey"}, "value": "red"}

I was wondering if there is a combination of transforms and repeat commands to achieve this for an unknown number of groups.

Answer 1

Here is one possible solution:

create an additional layer with new data

"facet": {"row": {"field": "group"}},
      "spec": {
        "layer": [
          {
            "data": {"name": "main"},
            "mark": "circle",
            "encoding": {
              "y": {
                "field": "y",
                "type": "ordinal"
              },
              "x": {
                "field": "x",
                "type": "ordinal"
              },
              "color": {"value": "grey"}
            },
            "params": []
          },
          {
            "mark": {"type": "circle", "opacity": 1, "color": "red"},
            "encoding": {
              "y": {
                "field": "y",
                "type": "ordinal"
              },
              "x": {
                "field": "x",
                "type": "ordinal"
              }
            }
          }
        ]
      }

full example in vega editor