changing colour of marks based on data values [vega-lite]

Community Help
1

I understand that I can use "color": {"value": "#ff9900"} to change the colours of the marks but is it possible to have different colours for different range of values? Can I use if statements to achieve that and if so, could you tell me how or point me to a Notebook or tutorial that illustrates this please?

1 Like
2

In Vega-Lite you can specify the color encoding just like any other, with a key accessor, a scale etc.

For example in https://observablehq.com/@mbostock/vega-lite-scatterplot

you could change the encoding definition to

  encoding: {
    color: {field: "Origin", type: "ordinal", scale: {range: ["black", "steelblue", "orange"]}},
    x: {field: "Horsepower", type: "quantitative"},
    y: {field: "Miles_per_Gallon", type: "quantitative"},
  }
3

Iā€™m sorry I donā€™t know enough about vega-lite for your other questions; Iā€™ve add ā€œvega liteā€ in their titles in the hope that it will attract other people who can help :slight_smile:

4

Thanks, Philippe, for the edit.

Iā€™m afraid thatā€™s not what Iā€™m looking for. Please allow me to clarify my questionā€¦ Say my data was:

0: Object {caseId: "1", total: "10"}
1: Object {caseId: "2", total: "5"}
3: Object {caseId: "3", total: "9"}
4: Object {caseId: "4", total: "3"}
5: Object {caseId: "5", total: "2"}

And I wanted the mark to be blue where total <=5 and red where total > 5, how or where do I specify this condition?

5

in the same notebook try

"color": {
  "condition": {"test": "datum['Horsepower'] < 100", "value": "black"},
  "value": "red"
},

see https://vega.github.io/vega-lite/docs/condition.html

6

It works! Thank you! Now Iā€™ll just have to figure out the formatting so itā€™ll work in my script.

1 Like