Vega-Lite 单线或多种颜色的轨迹标记

Question

我正在尝试绘制轨迹标记之类的东西，但我可以在其中绘制线条颜色而不是线条大小。那可能吗？目前我还没能实现。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Google's stock price over time.",
  "data": {"url": "data/stocks.csv"},
  "transform": [
    {"filter": "datum.symbol==='GOOG'"},
    {"calculate": "datum.price>400", "as": "good"}
  ],
  "mark": "trail",
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "price", "type": "quantitative"},
    "size": {"field": "good", "type": "nominal"}
  }
}

这是在使用带有轨迹标记的尺寸时。

这个如果我映射到颜色。

Answer 1

Vega-Lite 中的线条不能是多种颜色，但您可以使用颜色编码和估算变换来更改线条不同部分的颜色(vega editor):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Google's stock price over time.",
  "data": {"url": "data/stocks.csv"},
  "transform": [
    {"filter": "datum.symbol==='GOOG'"},
    {"calculate": "datum.price>400", "as": "good"}
  ],
  "mark": "line",
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "price", "type": "quantitative", "impute": {"value": null}},
    "color": {"field": "good", "type": "nominal"}
  }
}

不幸的是，这会在行中留下中断；你可以通过创建这样的背景层来解决这个问题 (vega editor):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Google's stock price over time.",
  "data": {"url": "data/stocks.csv"},
  "transform": [
    {"filter": "datum.symbol==='GOOG'"},
    {"calculate": "datum.price>400", "as": "good"}
  ],
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "price", "type": "quantitative", "impute": {"value": null}}
  },
  "layer": [
    {"mark": "line"},
    {
      "mark": "line",
      "encoding": {"color": {"field": "good", "type": "nominal"}}
    }
  ]
}

编辑：如果您使用的是 Altair，则等效项如下所示：

import altair as alt
from vega_datasets import data

alt.layer(
    alt.Chart().mark_line(),
    alt.Chart().mark_line().encode(color='good:N'),
    data=data.stocks.url
).transform_filter(
    'datum.symbol==="GOOG"',
).transform_calculate(
    good="datum.price>400"
).encode(
    x='date:T',
    y=alt.Y('price:Q', impute={'value': None})
)

Vega-Lite 单线或多种颜色的轨迹标记

Vega-Lite single line or trail mark with multiple colours

vega

vega-lite

altair