Vega lite highlighting data

Question

I have an hconcat function in Vega lite displaying country and a score. I wanted to highlight some countries (changing the color of some and leaving the rest as it is) but when ever I use the color function either it gives me an error if it is outsite go hconcad or just highlights the countries I want in one graph but not display the rest:

With nothing:

with color in hconcat:

How can I do a highlight outside of the hconcat (or inside I can just repeated across all graphs), while leaving all the other data in the same color.

My code:

        {
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "url": "https://raw.githubusercontent.com/DanStein91/Info-vis/master/coffee.csv",
    "format": {
      "type": "csv",
      "parse": {
        "Aroma": "number",
        "Flavor": "number",
        "Aftertaste": "number",
        "Acidity": "number",
        "Clean_Cup": "number",
        "Body": "number",
        "Balance": "number",
        "Uniformity": "number",
        "Cupper_Points": "number",
        "Sweetness": "number"
      }
    }
  },
"transform": [
        {
          "filter": "datum.Country_of_Origin"
        },
        {
          "calculate": "datum.Aroma + datum.Flavor + datum.Aftertaste + datum.Acidity + datum.Sweetness + datum.Balance ",
          "as": "Taste_Points"
        },
        {
          "calculate": "datum.Cupper_Points + datum.Clean_Cup + datum.Uniformity",
          "as": "Cup_Points"
        }
      ],
      "hconcat": [
        {
          "mark": "bar",
          "encoding": {
            "y": {
              "field": "Country_of_Origin",
              "type": "nominal",
              "sort": "-x"
            },
            "x": {
              "field": "Taste_Points",
              "type": "quantitative",
              "aggregate": "mean"
            }
          }
        },
        {
          "mark": "bar",
          "encoding": {
            "y": {
              "field": "Country_of_Origin",
              "type": "nominal",
              "sort": "-x"
            },
            "x": {
              "field": "Cup_Points",
              "type": "quantitative",
              "aggregate": "mean"
            }
          }
        },
        {
          "mark": "bar",
          "encoding": {
            "y": {
              "field": "Country_of_Origin",
              "type": "nominal",
              "sort": "-x"
            },
            "x": {
              "field": "Total_Cup_Points",
              "type": "quantitative",
              "aggregate": "mean"
            },
      "color": {
        "field": "Country_of_Origin",
        "type": "nominal",
        "scale": {
          "domain": [
            "Papua New Guinea",
            "Mauritius"
          ],
          "range": [
            "#8101FA",
            "#00C7A9"
          ]
        }
      }
          }
        }
      ],
      "config": {}
    }

Thanks.

Answer 1

You can do this using a Repeat Chart along with a Condition in the color encoding. The result might look something like this (view in editor):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "url": "https://raw.githubusercontent.com/DanStein91/Info-vis/master/coffee.csv",
    "format": {
      "type": "csv",
      "parse": {
        "Aroma": "number",
        "Flavor": "number",
        "Aftertaste": "number",
        "Acidity": "number",
        "Clean_Cup": "number",
        "Body": "number",
        "Balance": "number",
        "Uniformity": "number",
        "Cupper_Points": "number",
        "Sweetness": "number"
      }
    }
  },
  "transform": [
    {"filter": "datum.Country_of_Origin"},
    {
      "calculate": "datum.Aroma + datum.Flavor + datum.Aftertaste + datum.Acidity + datum.Sweetness + datum.Balance ",
      "as": "Taste_Points"
    },
    {
      "calculate": "datum.Cupper_Points + datum.Clean_Cup + datum.Uniformity",
      "as": "Cup_Points"
    }
  ],
  "repeat": ["Taste_Points", "Cup_Points", "Total_Cup_Points"],
  "spec": {
    "mark": "bar",
    "encoding": {
      "y": {"field": "Country_of_Origin", "type": "nominal", "sort": "-x"},
      "x": {
        "field": {"repeat": "repeat"},
        "type": "quantitative",
        "aggregate": "mean"
      },
      "color": {
        "value": "steelblue",
        "condition": {
          "test": {
            "field": "Country_of_Origin",
            "oneOf": ["Papua New Guinea", "Mauritius"]
          },
          "field": "Country_of_Origin",
          "type": "nominal",
          "scale": {
            "domain": ["Papua New Guinea", "Mauritius"],
            "range": ["#8101FA", "#00C7A9"]
          }
        }
      }
    }
  }
}