CODEWITHSUNDEEP
vega-lite
smpa01
smpa01

Reputation: 4346

Is it possible to apply the same condition as color encoding for legend

My source code is following

  "transform": [
    
    {
      "window": [
        {
          "op": "rank", "field": "Value", "as": "_rank"
        }
      ],
      "sort": [
        {
          "field": "Value",
          "order": "descending"
        }
      ]
    }
  ],
  "encoding": {
    "color": {
      "field": "_rank",
      "condition": {
        "test": "datum._rank>5",
        "value": "grey"
      }
    },
    "x": {
      "field": "Week",
      "type": "nominal",
      "axis": {
        "labelAngle": 0
      }
    },
    "y": {
      "field": "Value",
      "type": "quantitative",
      "axis": {
        "grid": false
      }
    }
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "tooltip": true
      }
    },
    {
      "mark": {
        "type": "text",
        "align": "center",
        "baseline": "middle",
        "dx": 0,
        "dy": -5,
        "tooltip": true
      },
      "encoding": {
        "text": {
          "field": "Value"
        }
      }
    }
  ]

I put a condition for the color encoding to show anything but top5 to show in different colors and any values that are not top5 should be grey.

"color": {
  "field": "_rank",
  "condition": {
    "test": "datum._rank>5",
    "value": "grey"
  }
}

It is all good for the bars but the legends don't generate with the same conditions.

Is it possible to extend the same top5 logics for the legend's color as well? i.e. anything <5 are grey in color (each) in legend and everything else is the same color as the condition (currently this part is getting generated)

Editor

Upvotes: 1

Views: 348

Answers (1)

jakevdp
jakevdp

Reputation: 86453

The legend colors will reflect the color scale that you specify, and not reflect conditions.

The easiest way to do what you want is likely by setting the range for your color scheme; for example:

{
  "data": {"url": "data/cars.json"},
  "mark": "point",
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"},
    "color": {
      "field": "Origin", "type": "nominal",
      "scale": {"range": ["purple", "#ff0000", "teal"]}
    }
  }
}

enter image description here

You'll have to modify the specified colors based on how many color categories you have in your data.

Upvotes: 1

Related Questions