CODEWITHSUNDEEP
vegavega-lite
Venugopal Madathil
Venugopal Madathil

Reputation: 2021

vega-lite line plot - color not getting applied in transform filter

Vega Editor link here

I've an overlay color change based on filter condition in a multi line chart. Got it working with single line here but 'red' overlay line(along with red dot) doesn't come up with this above multi-line example. Could anyone help me out?

Upvotes: 0

Views: 1246

Answers (1)

jakevdp
jakevdp

Reputation: 86443

Short answer: your chart is working, except the filtered values are not colored red.

The core issue is that encodings always supersede mark properties, as you can see in this simpler example: editor link

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "description": "A scatterplot showing horsepower and miles per gallons.",
  "data": {"url": "data/cars.json"},
  "mark": {"type": "point", "color": "red"},
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"},
    "color": {"field": "Origin", "type": "nominal"},
    "shape": {"field": "Origin", "type": "nominal"}
  }
}

enter image description here

Notice that although we specify that the mark should have color red, this is overridden by the color encoding. This is by design within Vega-Lite, because encodings are more specific than properties.

Back to your chart: because you specify the color encoding in the parent chart, each individual layer inherits that color encoding, and those colors override the "color": "red" that you specify in the individual layers.

To make it do what you want, you can move the color encoding into the individual layers (and use a detail encoding to ensure the data are still grouped by that field). For example (editor link):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "data": {...},
  "width": 1000,
  "height": 200,
  "autosize": {"type": "pad", "resize": true},
  "transform": [
    {
      "window": [{"op": "rank", "as": "rank"}],
      "sort": [{"field": "dateTime", "order": "descending"}]
    },
    {"filter": "datum.rank <= 100"}
  ],
  "layer": [
    {
      "mark": {"type": "line"},
      "encoding": {
        "color": {
          "field": "name",
          "type": "nominal",
          "legend": {"title": "Type"}
        }
      }
    },
    {
      "mark": {"type": "line", "color": "red"},
      "transform": [
        {
          "as": "count",
          "calculate": "if(datum.anomaly == true, datum.count, null)"
        },
        {"calculate": "true", "as": "baseline"}
      ]
    },
    {
      "mark": {"type": "circle", "color": "red"},
      "transform": [
        {"filter": "datum.anomaly == true"},
        {"calculate": "true", "as": "baseline"}
      ]
    }
  ],
  "encoding": {
    "x": {
      "field": "dateTime",
      "type": "temporal",
      "timeUnit": "hoursminutesseconds",
      "sort": {"field": "dateTime", "op": "count", "order": "descending"},
      "axis": {"title": "Time", "grid": false}
    },
    "y": {
      "field": "count",
      "type": "quantitative",
      "axis": {"title": "Count", "grid": false}
    },
    "detail": {"field": "name", "type": "nominal"}
  }
}

Upvotes: 3

Related Questions