I’m working on the Vega-lite code shown below. I am trying to add a legend/key with two values, like:
Attempt 1 gist: https://gist.github.com/woter1832/ca24c4dd3a733072239f3a22b7b012dc
Vega Editor
Adding line 18 ("color": {"field": "cost", "type": "quantitative"}) creates a graded legend.
Attempt 2 gist: https://gist.github.com/woter1832/eb1c820e307de8a52b00e0ba7ec4fe47
Vega Editor
This is the correct type of legend, but the chart is not right.
Vega Editor
Code to add legend to:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": "container",
"height": 550,
"data": {
"values": [
{"model": "Audi", "score": 150, "cost": 4500},
{"model": "Mercedes", "score": 75, "cost": 6000},
{"model": "BMW", "score": 115, "cost": 5000}
]
},
"encoding": {
"x": {"field": "model", "type": "nominal", "axis": {"labelAngle": 45, "title": "Model"}}
},
"layer": [
{
"mark": {"type": "bar", "color": "steelblue", "width":{"band": 0.75}},
"encoding": {
"y": {"field": "score", "type": "quantitative", "axis": {"title": "Score"}, "scale":{"rangeMax":-100}},
"xOffset":{"value": 0}
}
},
{
"mark": {"type": "bar", "color": "orange", "width":{"band": 0.4}},
"encoding": {
"y": {"field": "cost", "type": "quantitative", "axis": {"title": "Cost", "orient": "right", "format": "$.0f"}},
"xOffset":{"value": 0}
}
}
],
"resolve": {
"scale": {
"y": "independent"
}
}
}
Gist link: https://gist.github.com/woter1832/6a9c227f9a2ae5393cbb7f6f83ed3a7f
Any help will be greatly appreciated.
T.I.A.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": "container",
"height": 550,
"data": {
"values": [
{"model": "Audi", "score": 150, "cost": 4500},
{"model": "Mercedes", "score": 75, "cost": 6000},
{"model": "BMW", "score": 115, "cost": 5000}
]
},
"encoding": {
"x": {
"field": "model",
"type": "nominal",
"axis": {"labelAngle": 45, "title": "Model"}
}
},
"layer": [
{
"mark": {"type": "bar", "fill": "steelblue", "width": {"band": 0.75}},
"encoding": {
"y": {
"field": "score",
"type": "quantitative",
"axis": {"title": "Score"},
"scale": {"rangeMax": -100}
},
"xOffset": {"value": 0}, "color": {
"field": "x",
"title":"My Legend",
"scale": {
"domain": ["cost", "score"],
"range": ["steelblue", "orange"]
}
}
}
},
{
"mark": {"type": "bar", "color": "orange", "width": {"band": 0.4}},
"encoding": {
"y": {
"field": "cost",
"type": "quantitative",
"axis": {"title": "Cost", "orient": "right", "format": "$.0f"}
},
"xOffset": {"value": 0}
}
}
],
"resolve": {"scale": {"y": "independent"}}
}