Forum Discussion
Deneb - Vega Lite Color Gradient Per Category
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, how about this?
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"url": "data/cars.json"},
"transform": [
{
"aggregate": [{"op": "count", "as": "num_cars"}],
"groupby": ["Origin", "Cylinders"]
},
{
"window": [{"field": "num_cars", "op": "average", "as": "avg num_cars"}],
"groupby": ["Origin"],
"frame": [null, null]
},
{
"window": [
{"field": "num_cars", "op": "count", "as": "record ct per cylinders"}
],
"groupby": ["Origin"],
"frame": [null, null]
},
{
"calculate": "((datum['num_cars']-datum['avg num_cars']))",
"as": "variance"
},
{
"sort": [
{"field": "Cylinders"},
{"field": "num_Cars", "order": "descending"}
]
}
],
"facet": {"row": {"field": "Origin", "title": null}},
"title": {
"text": "Count of Cars 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": "num_cars",
"type": "quantitative",
"legend": {
"direction": "horizontal",
"orient": "right",
"gradientLength": 100,
"title": null
}
}
}
},
{
"mark": "text",
"encoding": {
"text": {"field": "num_cars", "type": "quantitative"},
"color": {
"condition": {"test": "datum['variance'] < 0", "value": "black"},
"value": "white"
}
}
}
]
},
"resolve": {"scale": {"y": "independent", "color": "independent"}},
"config": {"axis": {"grid": true, "tickBand": "extent"}}
}
giammariam Yes 99% there, aside from in my case its not an aggregation the gradients needs to be based on, its just a value of a measure.
Thanks for your help.
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.
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.
Hi, how do you do this in Powerbi? I've not worked with Deneb before
