Encode a Field using Conditions in Vega-Lite

Question

OBJECTIVE

I'm trying to add data labels to my chart, however I have multiple bars layered on top of each other, and I need the data labels to hover over different bars depending on if values in a certain field are positive or negative.

ATTEMPT

This could be achieved by changing the "field" property of the "y" encoding using a condition. I've spent some time exploring Vega-Lite documentation and experimenting with some stuff, but I can't get it to work no matter what I try. Vega seems to ignore by condition. I'm also curious if I'm able to apply conditions to "mark" rather than "encoding". When values are negative, I'd like to change "dy" to 10 from -10.

Any suggestions?

'''

  "mark": {
    "type":"text",
    "dy":-10
  },
  "encoding": {
    "text": {
      "field": "field_one"
    },
    "y": {
      "condition":{
        "test":"datum['test_data'] < 0",
        "field": "field_one"
      }, 
      "field": "field_two"
    }....
  }

'''

How about 2 text marks: one for negative labels and one for positive labels. On each mark, use a filter transform to select the positive or negative values. https://vega.github.io/vega-lite/docs/filter.html — TheRizza, Jan 30 '23 at 03:42
Thanks, @TheRizza! I didn't end up using the filter transform, but you gave me the idea to just add another text mark. I got my solution by hiding negative labels when the value is positive, and hiding positive labels when the value is negative. — Nick W, Jan 31 '23 at 20:35
Great! You should paste your final spec below and accept it as the answer. It will help the next person looking here. — TheRizza, Feb 01 '23 at 03:02

score 1 · Answer 1 · answered Feb 01 '23 at 19:44

A couple solutions exist.

Two Text Encodings: One solution is to create two texts with varying y offsets and fields, and hide them depending on whether the values are positive or negative.


    {
      "mark": {
        "type":"text",
        "dy":-10
      },
      "encoding": {
        "text": {
          "condition":{
            "test": "datum['test_data'] >= 0",
            "type":"quantitative",
            "field": "test_data"
          }
          "value": ""
        },
        "y": {
          "field": "field_one",
          "type": "quantitative"
        }
      }
    },
    {
      "mark": {
        "type":"text",
        "dy":10
      },
      "encoding": {
        "text": {
          "condition":{
            "test": "datum['test_data'] < 0",
            "type":"quantitative",
            "field": "test_data"
          }
          "value": ""
        },
        "y": {
          "field": "field_two",
          "type": "quantitative"
        }
      }
    }

Transformation and Calculation

The other solution only solves the "dy" problem and was answered using another technique involving transform and calculate on GitHub.

Encode a Field using Conditions in Vega-Lite

1 Answers1