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"}} }
Hi DW868990. Not quite sure if this is what you're after (see below), this implementation utilizes faceting. If it is, consider marking this as the solution. If not, could you please clarify what you mean? I'm making the assumption that you want your category to be Cylinders.
{
"$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": ["Cylinders"],
"frame": [null, null]
},
{
"window": [
{"field": "num_cars", "op": "count", "as": "record ct per cylinders"}
],
"groupby": ["Cylinders"],
"frame": [null, null]
},
{
"calculate": "((datum['num_cars']-datum['avg num_cars']))",
"as": "variance"
},
{
"sort": [
{"field": "Cylinders"},
{"field": "num_Cars", "order": "descending"}
]
}
],
"facet": {"column": {"field": "Cylinders", "title": null}},
"title": {
"text": "Count of Cars per Cylinder per Origin",
"orient": "top",
"anchor": "middle"
},
"spec": {
"encoding": {
"y": {"field": "Origin", "type": "ordinal"},
"x": {"field": "Cylinders", "type": "ordinal", "axis": null}
},
"layer": [
{
"mark": "rect",
"encoding": {
"color": {
"field": "num_cars",
"type": "quantitative",
"legend": {
"direction": "vertical",
"orient": "bottom",
"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": {"x": "independent", "color": "independent"}},
"config": {"axis": {"grid": true, "tickBand": "extent"}}
}
Thank you. Yes its nearly what i am after. Although the category i would be using is Origin in this example.
So for example say Europe ranged from 1 to 100
and then USA ranged from 1 to 1000
The color for the highest value for each category would be the same gradient/colour.
Thanks for your help.
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"}} }