Vega-lite 渐变：指定颜色相对于轴刻度的变化位置

Question

我有一个指标，想要在面积图中显示对应于好的（0 到 .1 = 绿色）、好的（>.1 到 .3 = 黄色）、坏（> .3 = 红色）的渐变颜色不同时间点的度量。 如何使颜色切割点相对于 y 轴上的实际比例？

我想我可以指定带有偏移的颜色中断，并且我的第一遍看起来是正确的：

{
  "width": 600,
  "data": {
    "values": [
      {
        "__row__": 0,
        "calendar_month_year": "Dec-23",
        "concentration_risk_monthly": 0.51
      },
      {
        "__row__": 1,
        "calendar_month_year": "Jan-24",
        "concentration_risk_monthly": 0.5
      },
      {
        "__row__": 2,
        "calendar_month_year": "Feb-24",
        "concentration_risk_monthly": 0.27
      },
      {
        "__row__": 3,
        "calendar_month_year": "Mar-24",
        "concentration_risk_monthly": 0.22
      },
      {
        "__row__": 4,
        "calendar_month_year": "Apr-24",
        "concentration_risk_monthly": 0.25
      },
      {
        "__row__": 5,
        "calendar_month_year": "May-24",
        "concentration_risk_monthly": 0.22
      }
    ]
  },
  "mark": {
    "type": "area",
    "color": {
      "x1": 1,
      "y1": 1,
      "x2": 1,
      "y2": 0,
      "gradient": "linear",
      "stops": [
        {"offset": 0, "color": "#00800166"},
        {"offset": 0.3, "color": "#F7B50066"},
        {"offset": 1, "color": "#A9281F66"}
      ]
    }
  },
  "encoding": {
    "x": {
      "field": "calendar_month_year",
      "type": "ordinal",
      "sort": {"field": "__row__"},
      "axis": {"title": null},
      "scale": {"padding": 0}
    },
    "y": {
      "field": "concentration_risk_monthly",
      "type": "quantitative",
      "axis": {"title": null}
    }
  }
}

给出：

但是如果我将该指标的数据更改为低于 0.05（远低于绿色的 0.1）：

{
  "width": 600,
  "data": {
    "values": [
      {
        "__row__": 0,
        "calendar_month_year": "Dec-23",
        "concentration_risk_monthly": 0.051
      },
      {
        "__row__": 1,
        "calendar_month_year": "Jan-24",
        "concentration_risk_monthly": 0.05
      },
      {
        "__row__": 2,
        "calendar_month_year": "Feb-24",
        "concentration_risk_monthly": 0.027
      },
      {
        "__row__": 3,
        "calendar_month_year": "Mar-24",
        "concentration_risk_monthly": 0.022
      },
      {
        "__row__": 4,
        "calendar_month_year": "Apr-24",
        "concentration_risk_monthly": 0.025
      },
      {
        "__row__": 5,
        "calendar_month_year": "May-24",
        "concentration_risk_monthly": 0.022
      }
    ]
  },
  "mark": {
    "type": "area",
    "color": {
      "x1": 1,
      "y1": 1,
      "x2": 1,
      "y2": 0,
      "gradient": "linear",
      "stops": [
        {"offset": 0.0, "color": "#00800166"},
        {"offset": 0.3, "color": "#F7B50066"},
        {"offset": 1.0, "color": "#A9281F66"}
      ]
    }
  },
  "encoding": {
    "x": {
      "field": "calendar_month_year",
      "type": "ordinal",
      "sort": {"field": "__row__"},
      "axis": {"title": null},
      "scale": {"padding": 0}
    },
    "y": {
      "field": "concentration_risk_monthly",
      "type": "quantitative",
      "axis": {"title": null}
    }
  }
}

我希望整个区域都是绿色的，但似乎偏移量是相对于整个区域而言的，现在仍然有红色区域，即使所有指标都低于 0.1：

Answer 1

试试这个。它不能 100% 工作，而且非常笨重，但可能足以满足您的用例。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 600,
  "data": {
    "values": [
      {
        "__row__": 0,
        "calendar_month_year": "Dec-23",
        "concentration_risk_monthly": 0.051
      },
      {
        "__row__": 1,
        "calendar_month_year": "Jan-24",
        "concentration_risk_monthly": 0.05
      },
      {
        "__row__": 2,
        "calendar_month_year": "Feb-24",
        "concentration_risk_monthly": 0.027
      },
      {
        "__row__": 3,
        "calendar_month_year": "Mar-24",
        "concentration_risk_monthly": 0.022
      },
      {
        "__row__": 4,
        "calendar_month_year": "Apr-24",
        "concentration_risk_monthly": 0.025
      },
      {
        "__row__": 5,
        "calendar_month_year": "May-24",
        "concentration_risk_monthly": 0.022
      }
    ]
  },
  "transform": [{"extent": "concentration_risk_monthly", "param": "myExtent"}],
  "mark": {
    "type": "area",
    "fill": {
      "expr": "{'gradient': 'linear', 'x1':0,'y1':1,'x2':0,'y2':0,  'stops': [{'offset': 0, 'color': scale('stroke',  myExtent[0]>1?1:myExtent[0]>0.3?0.3:0)},{'offset': 0.3, 'color':  scale('stroke', myExtent[1]>1?1:myExtent[1]>0.3?0.3:0)},{'offset': 1, 'color':  scale('stroke', myExtent[1]>=1?1:myExtent[1]>0.3?0.3:0)}]}"
    },
    "strokeOpacity": 0
  },
  "encoding": {
    "stroke": {
      "field": "1",
      "legend": null,
      "scale": {
        "type": "linear",
        "range": ["green", "yellow", "red"],
        "domain": [0, 0.3, 1]
      }
    },
    "x": {
      "field": "calendar_month_year",
      "type": "ordinal",
      "sort": {"field": "__row__"},
      "axis": {"title": null},
      "scale": {"padding": 0}
    },
    "y": {
      "field": "concentration_risk_monthly",
      "type": "quantitative",
      "axis": {"title": null}
    }
  }
}