Vega lite highlighting data - vega-lite

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"]
}
}
}
}
}
}