powerbivisualizationpowerbi-desktopvega-litedeneb

Fixed height line chart with intentional gaps

I have a line mark with fixed y value and I want it to be segmented based on a binary value (with values 0 and 1).

Here's an example (based on this), the line mark is red and the boolean value high_price is based on whether the price is over 400.

red line mark

I've tried setting the opacity based on the value of high_price and it kind of works on the left side of year 2006 (although it seems the opacity is not totally zero), but then it just stays at opacity 1 even though the value of high_price changes between 0 and 1 a few times after 2006.

How can I get it so when high_price is zero, the line is not visible and when it is one, the line is fully visible?

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Google's stock price over time.",
  "data": {"url": "data/stocks.csv"},
  "transform": [{"filter": "datum.symbol==='GOOG'"}],
  "encoding": {
    "x": {"field": "date", "type": "temporal"}
  },
  "layer": [{
  "mark": "area",
  "encoding": {
    "y": {"field": "price", "type": "quantitative"}
  }
  },
  {
    "transform": [
      {
        "calculate": "datum.price > 400 ? 1 : 0",
        "as": "high_price"
      }
    ],
    "mark": {"type": "line", "size": 5},
    "encoding": {
      "y": {
        "value": 201
      },
      "opacity": {
        "legend": null,
        "field": "high_price",
        "type": "quantitative"
      },
      "color": {"value": "red"}
    }
  }]
}
Solution

  • Something like this?

    enter image description here

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Google's stock price over time.",
  "data": {"url": "data/stocks.csv"},
  "transform": [{"filter": "datum.symbol==='GOOG'"}],
  "encoding": {"x": {"field": "date", "type": "temporal"}},
  "layer": [
    {
      "mark": "area",
      "encoding": {"y": {"field": "price", "type": "quantitative"}}
    },
    {
      "transform": [
        {"calculate": "datum.price > 400 ? 1 : 0", "as": "high_price"}
      ],
      "mark": {"type": "rule", "strokeWidth": 4},
      "encoding": {
        "y": {"value": 201}, "y2":{"value":195},
        "opacity": {"field": "high_price", "type": "ordinal", "scale":{"rangeMin":0}, "legend":null},
        "color": {"value": "red"}
      }
    }
  ]
}