Vega-lite: field appears in the wrong chart?

Question

I'm seeing a strange behavior in Vega Lite that I don't understand.

Take this example chart:

{
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "data": {
        "values": [
            {"model": "Sedan",   "color": "Red",    "sales": 28},
            {"model": "Sedan",   "color": "Silver", "sales": 17},
            {"model": "Sedan",   "color": "Black",  "sales": 34},
            {"model": "Pickup",  "color": "Red",    "sales": 20},
            {"model": "Pickup",  "color": "Silver", "sales": 71},
            {"model": "Pickup",  "color": "Black",  "sales": 14},
            {"model": "Minivan", "color": "Red",    "sales": 52},
            {"model": "Minivan", "color": "Silver", "sales": 31},
            {"model": "Minivan", "color": "Black",  "sales": 45}
        ]
    },
    "concat": [{
        "mark": "bar",
        "encoding": {
            "x": {"field": "model"},
            "y": {"aggregate": "sum", "field": "sales"}
        }
    },{
        "mark": "arc",
        "encoding": {
            "color": {"field": "color"},
            "theta": {"aggregate": "sum", "field": "sales"}
        }
    }]
}

The result is straightforward enough:

Now, watch what happens when I generate a new field "flag" in the transform section of the first chart , to highlight a specific bar (Pickups):

{
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "data": {
        "values": [
            {"model": "Sedan",   "color": "Red",    "sales": 28},
            {"model": "Sedan",   "color": "Silver", "sales": 17},
            {"model": "Sedan",   "color": "Black",  "sales": 34},
            {"model": "Pickup",  "color": "Red",    "sales": 20},
            {"model": "Pickup",  "color": "Silver", "sales": 71},
            {"model": "Pickup",  "color": "Black",  "sales": 14},
            {"model": "Minivan", "color": "Red",    "sales": 52},
            {"model": "Minivan", "color": "Silver", "sales": 31},
            {"model": "Minivan", "color": "Black",  "sales": 45}
        ]
    },
    "concat": [{
        "mark": "bar",
        "transform": [
            {"calculate": "datum.model == 'Pickup'", "as": "flag"}   // <- "flag" defined here
        ],
        "encoding": {
            "x": {"field": "model"},
            "y": {"aggregate": "sum", "field": "sales"},
            "color": {"field": "flag"}                               // <- and used here
        }
    },{
        "mark": "arc",                                               // <- the second chart
        "encoding": {                                                //    shouldn't even see
            "color": {"field": "color"},                             //    the new "flag" field
            "theta": {"aggregate": "sum", "field": "sales"}          //
        }
    }]
}

The flag works (Pickup bar is highlighted) but even though I defined it in the context of the first chart, it influences the second chart and its legend :

Is this a bug? Did I misunderstand something very basic about how Vega Lite works?

Answer 1

The issue is that in compound charts, Vega-Lite uses shared scales by default (See Scale and Guide Resolution ).

If you want your color scales to be independent, you can set

  "resolve": {"scale": {"color": "independent"}}

The full spec would look like this ( view in editor ):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
      {"model": "Sedan", "color": "Red", "sales": 28},
      {"model": "Sedan", "color": "Silver", "sales": 17},
      {"model": "Sedan", "color": "Black", "sales": 34},
      {"model": "Pickup", "color": "Red", "sales": 20},
      {"model": "Pickup", "color": "Silver", "sales": 71},
      {"model": "Pickup", "color": "Black", "sales": 14},
      {"model": "Minivan", "color": "Red", "sales": 52},
      {"model": "Minivan", "color": "Silver", "sales": 31},
      {"model": "Minivan", "color": "Black", "sales": 45}
    ]
  },
  "concat": [
    {
      "mark": "bar",
      "transform": [{"calculate": "datum.model == 'Pickup'", "as": "flag"}],
      "encoding": {
        "x": {"field": "model"},
        "y": {"aggregate": "sum", "field": "sales"},
        "color": {"field": "flag"}
      }
    },
    {
      "mark": "arc",
      "encoding": {
        "color": {"field": "color"},
        "theta": {"aggregate": "sum", "field": "sales"}
      }
    }
  ],
  "resolve": {"scale": {"color": "independent"}}
}