Vega-Lite彗星图轨迹异常沿双轴延伸，需修正为仅水平显示

问题描述 #

基于马来西亚第14、15届选举各州政党席位数据制作彗星图，参考官方彗星图示例调整数据集结构（election代year、state代variety、party代site、seats代yield），但生成的彗星轨迹同时沿x、y轴延伸，无法实现预期的水平轨迹效果。

当前配置代码 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "https://raw.githubusercontent.com/botsunny/FIT3179-Viz-2/main/data/wrangled_ge14_15.csv"},
  "title": "Change in seats by state among major coalitions from GE14 to GE15",
  "transform": [
    {"pivot": "election", "value": "seats", "groupby": ["state", "party"]},
    {"fold": ["14", "15"], "as": ["election", "seats"]},
    {"calculate": "toNumber(datum.election)", "as": "election"},
    {"calculate": "datum['15'] - datum['14']", "as": "delta"}
  ],
  "mark": "trail",
  "encoding": {
    "x": {"field": "election", "title": null},
    "y": {"field": "state", "title": "state"},
    "size": {
      "field": "seats",
      "type": "quantitative",
      "scale": {"range": [0, 15]},
      "legend": {"values": [5, 15]},
      "title": "Seats won"
    },
    "tooltip": [{"field": "election", "type": "quantitative"}, {"field": "seats"}],
    "color": {
      "field": "delta",
      "type": "quantitative",
      "scale": {"domainMid": 0},
      "title": "Change in seats"
    },
    "column": {"field": "party", "title": "Coalation"}
  },
  "view": {"stroke": null},
  "config": {"legend": {"orient": "bottom", "direction": "horizontal"}}
}

解决方案 #

问题根源是轨迹的分组逻辑不明确，Vega-Lite无法识别哪些数据点属于同一水平轨迹，导致错误连接不同州的点。以下是两种修复方式：

方案1：添加分组编码（推荐） #

在encoding中加入detail字段，明确指定每个轨迹的分组依据（按州分组，结合列的政党维度，确保同一政党-州组合的两个选举数据点被连接）：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "https://raw.githubusercontent.com/botsunny/FIT3179-Viz-2/main/data/wrangled_ge14_15.csv"},
  "title": "Change in seats by state among major coalitions from GE14 to GE15",
  "transform": [
    {"pivot": "election", "value": "seats", "groupby": ["state", "party"]},
    {"fold": ["14", "15"], "as": ["election", "seats"]},
    {"calculate": "toNumber(datum.election)", "as": "election"},
    {"calculate": "datum['15'] - datum['14']", "as": "delta"}
  ],
  "mark": "trail",
  "encoding": {
    "x": {"field": "election", "title": null, "type": "ordinal"},
    "y": {"field": "state", "title": "State"},
    "size": {
      "field": "seats",
      "type": "quantitative",
      "scale": {"range": [0, 15]},
      "legend": {"values": [5, 15]},
      "title": "Seats won"
    },
    "tooltip": [{"field": "election", "type": "quantitative"}, {"field": "seats"}, {"field": "delta", "title": "Seat Change"}],
    "color": {
      "field": "delta",
      "type": "quantitative",
      "scale": {"domainMid": 0},
      "title": "Change in seats"
    },
    "column": {"field": "party", "title": "Coalition"},
    "detail": {"field": "state"}
  },
  "view": {"stroke": null},
  "config": {"legend": {"orient": "bottom", "direction": "horizontal"}}
}

方案2：对数据排序 #

在transform中添加排序步骤，确保同一政党-州组合的两个选举数据点连续排列，让trail mark正确连接：

"transform": [
  {"pivot": "election", "value": "seats", "groupby": ["state", "party"]},
  {"fold": ["14", "15"], "as": ["election", "seats"]},
  {"calculate": "toNumber(datum.election)", "as": "election"},
  {"calculate": "datum['15'] - datum['14']", "as": "delta"},
  {"sort": [{"field": "party"}, {"field": "state"}, {"field": "election"}]}
]

效果说明 #

修改后，每个政党列下的各州会生成水平轨迹，轨迹的粗细对应席位数量，颜色对应席位变化（正增长/负增长），与官方彗星图示例效果一致。

内容的提问来源于stack exchange，提问作者botsunny