vega-lite
Vega-lite mark not showing colors as specified
I am trying to change the Table Bubble Plot example (https://vega.github.io/vega-lite/examples/circle_github_punchcard.html) to include an additional value for the color gradient of the mark. I have simplified my example in this editor link:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Horizontally concatenated charts that show different types of discretizing scales.",
"data": {
"values": [
{"a": "A", "b": 2020, "c": 11, "d": 3},
{"a": "A", "b": 2020, "c": 40.2, "d": 3},
{"a": "A", "b": 2021, "c": 40.2, "d": 2},
{"a": "A", "b": 2022, "c": 70.2, "d": 1},
{"a": "B", "b": 2020, "c": 20.2, "d": 1},
{"a": "B", "b": 2021, "c": 20.2, "d": 2},
{"a": "B", "b": 2021, "c": 20.2, "d": 2},
{"a": "B", "b": 2022, "c": 20.2, "d": 1},
{"a": "C", "b": 2021, "c": 20.2, "d": 1},
{"a": "C", "b": 2022, "c": 20.2, "d": 1},
{"a": "C", "b": 2022, "c": 20.2, "d": 1}
]
},
"mark": "circle",
"encoding": {
"y": {
"field": "a",
"type": "nominal",
"sort": null,
"axis": {"ticks": false, "domain": false, "title": null}
},
"x": {"field": "b", "type": "ordinal"},
"size": {
"field": "b",
"type": "quantitative",
"scale": {
"type": "threshold",
"domain": [30, 70],
"range": [80, 200, 320]
}
},
"color": {
"field": "d",
"type": "quantitative",
"scale": {
"type": "threshold",
"domain": [2, 3],
"range": ["#FF0000", "#FBFF00", "#00FF00"]
},
"legend": {"title": "Threshold"}
}
},
"resolve": {"scale": {"color": "independent", "size": "independent"}}
}
Here you clearly see the difference between red and lightred, which I don't want. I just want one of these three colors.
Solution
