Forum Discussion
Deneb - Vega Lite Color Gradient Per Category
- 3 years ago
DW868990, oh wow, apologies. It was so similar to an example on the vega-lite page, that I missed what you were actually after. Let me know if this is better. Happy to make additional tweaks if necessary. I took out the text in the boxes to match what you have. Can add it back in though if you like.
{ "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "data": {"url": "data/cars.json"}, "facet": {"row": {"field": "Origin", "title": null}}, "title": { "text": "Mean Horsepower per Cylinder per Origin", "orient": "top", "anchor": "middle" }, "spec": { "encoding": { "y": {"field": "Origin", "type": "ordinal", "axis": null}, "x": {"field": "Cylinders", "type": "ordinal"} }, "layer": [ { "mark": "rect", "encoding": { "color": { "field": "Horsepower", "aggregate": "average", "type": "quantitative", "legend": { "direction": "horizontal", "orient": "right", "gradientLength": 100, "title": null } } } } ] }, "resolve": {"scale": {"y": "independent", "color": "independent"}}, "config": {"axis": {"grid": true, "tickBand": "extent"}} }
DW868990, oh wow, apologies. It was so similar to an example on the vega-lite page, that I missed what you were actually after. Let me know if this is better. Happy to make additional tweaks if necessary. I took out the text in the boxes to match what you have. Can add it back in though if you like.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"url": "data/cars.json"},
"facet": {"row": {"field": "Origin", "title": null}},
"title": {
"text": "Mean Horsepower per Cylinder per Origin",
"orient": "top",
"anchor": "middle"
},
"spec": {
"encoding": {
"y": {"field": "Origin", "type": "ordinal", "axis": null},
"x": {"field": "Cylinders", "type": "ordinal"}
},
"layer": [
{
"mark": "rect",
"encoding": {
"color": {
"field": "Horsepower",
"aggregate": "average",
"type": "quantitative",
"legend": {
"direction": "horizontal",
"orient": "right",
"gradientLength": 100,
"title": null
}
}
}
}
]
},
"resolve": {"scale": {"y": "independent", "color": "independent"}},
"config": {"axis": {"grid": true, "tickBand": "extent"}}
}
Fantastic, this is exactly what i was after, thank you.
- giammariam3 years agoSolution Sage
No problem. Thanks for sticking by through the iterations. Happy to help and get some Deneb practice in. Feel free to @ me in any deneb related questions you have in the future.