Conditional with Deneb

[Luz]

Hi, 

I need to put in different colors the bars in a graph made with Deneb, I'm trying to use conditional but I don't know how because I have an error:

  "encoding": {
    "y": {
      "field": "detMaxConfidence",
      "type": "nominal",
      "axis": {"title": "Confianza"}},
      "color":{
        "condition": {
          "test":"datum['detMaxConfidence'] === 50",
        "value":"#3049AD" || "datum['detMaxConfidence'] === 60",
        "value":"#FF994E"   }, 
        "value": "red"
      },

 I need five diferent colors or five conditional, how can I do it?

@giammariam 

[giammariam · Accepted solution]

Hey @Luz, without seeing your data or your entire vega-lite spec, I had to make a few assumptions using the screenshot that you sent me in the private message. There are actually multiple ways to do this. If the color condition values are static (which it looks like they are from your code snippet above), then you could actually forgo the conditional and just populate the scale domain values (input) and scale range values (output) like the following:

            "color": {
              "field": "detMaxConfidence",
              "type": "nominal",
              "scale": {
                "domain": [50, 60, 70, 80, 100],
                "range": ["#3049AE", "#FE994E", "#C83D95", "#FFBCEE", "#3CF8F7"]
              }
            }

 If this assumption is wrong, please clarify the logic needed to determine the colors.

Here is a screenshot of the output from my vega-lite spec:

If this is enough to get you going please consider liking this reply and choosing it as the solution. Otherwise, I'm happy to help further.

Here is the gist where you can view the spec in the Vega editor.

Here is the spec (note that this contains dummy data so you'll want to remove that portion from the data property before bringing it into Deneb):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "padding": 15,
  "title": "Detecciones per Confianza",
  "background": "#F0F0F0",
  "width": 800,
  "height": 400,
  "data": {
    "name": "dataset",
    "values": [
      {"detecciones": 10, "detMaxConfidence": 50},
      {"detecciones": 15, "detMaxConfidence": 60},
      {"detecciones": 10, "detMaxConfidence": 70},
      {"detecciones": 12, "detMaxConfidence": 80},
      {"detecciones": 45, "detMaxConfidence": 100}
    ]
  },
  "layer": [
    {
      "encoding": {
        "x": {
          "field": "detecciones",
          "type": "quantitative",
          "axis": {"title": "Detecciones"}
        },
        "y": {
          "field": "detMaxConfidence",
          "type": "nominal",
          "axis": {"title": "Confianza"}
        }
      },
      "layer": [
        {
          "mark": {"type": "bar"},
          "encoding": {
            "color": {
              "field": "detMaxConfidence",
              "type": "nominal",
              "scale": {
                "domain": [50, 60, 70, 80, 100],
                "range": ["#3049AE", "#FE994E", "#C83D95", "#FFBCEE", "#3CF8F7"]
              },
              "legend": {
                "title": "Confianza"
              }
            }
          }
        },
        {
          "mark": {"type": "text"},
          "encoding": {
            "text": {"field": "detecciones", "type": "quantitative"},
            "xOffset": {"value": 10}
          }
        }
      ]
    }
  ]
}

[ppm1]

One way to do it is in your "mark" with a nested condition expression as shown below.

Pat