Search code examples
vegavega-lite

Is there a way to use plot number/identifier in a vega expression in vega repeat plot?


I would like to use vega-lite to produce a small multiples chart that show a progression through a series of states. Each individual plot contains the same set of geographic points that I wish to color according to a third variable depending on which plot it is in the series.

Is it possible, using vega-lite, to color the points according to a rule based on the position of a particular multiple within the series?

For example, in multiple 1 I want to color all points that have a value == 1 red, and the rest gray; in multiple 2 I want to color all points that have a value == 2 red and the rest gray; etc etc

So far I have tried setting up a repeat chart in vega (facet is no good because I need all of the data in each plot) and then to use a condition on the color encoding:

"color": {
        "condition": {
          "test": "datum.rdb == ???",
          "value": "#ff0000"
        },
     "value":"#aaaaaa" // grey if condition not met

But I don't know what ??? should be in order to get the number or identifier of each plot within the multiple.


Solution

  • The easiest way to do this is probably via a faceted layer chart. The idea is that you plot the entire dataset in each panel in gray in the background, and layer on that a copy of the same dataset faceted by color.

    Here is an example using the cars dataset (vega editor link):

    {
      "data": {"url": "data/cars.json"},
      "facet": {"type": "nominal", "field": "Origin"},
      "columns": 3,
      "spec": {
        "encoding": {
          "x": {"type": "quantitative", "field": "Horsepower"},
          "y": {"type": "quantitative", "field": "Miles_per_Gallon"}
        },
        "layer": [
          {
            "data": {"url": "data/cars.json"},
            "mark": {"type": "point", "color": "lightgray"}
          },
          {
            "mark": "point",
            "encoding": {"color": {"type": "nominal", "field": "Origin"}}
          }
        ]
      }
    }
    

    chart output

    Notice that the data is specified in two places: the background layer specifies the full dataset, while the foreground layer inherits the faceted dataset from the top level.