如何使用Vega-Lite为箱线图异常值添加抖动效果

完全可以通过Vega-Lite实现异常值的抖动效果，核心是给异常值的x轴位置添加可控的随机偏移，具体实现步骤如下：

• 筛选异常值：通过计算变换（calculate）基于四分位距规则，从数据中分离出超出正常范围的异常值。
• 生成随机偏移：利用random()函数生成微小的随机数值，作为异常值x轴位置的偏移量，实现抖动效果。
• 分层绘制：先绘制箱线图主体，再叠加带偏移的异常值点图层，保证视觉层级清晰。

核心代码示例 #

{
  "data": {"url": "你的数据源路径"},
  "transform": [
    // 计算各职位薪资的四分位距与异常值边界
    {
      "aggregate": [
        {"op": "q1", "field": "salary", "as": "q1"},
        {"op": "q3", "field": "salary", "as": "q3"}
      ],
      "groupby": ["position"]
    },
    {"calculate": "datum.q3 - datum.q1", "as": "iqr"},
    {"calculate": "datum.q1 - 1.5 * datum.iqr", "as": "lower_bound"},
    {"calculate": "datum.q3 + 1.5 * datum.iqr", "as": "upper_bound"},
    // 关联原始薪资数据并标记异常值
    {"lookup": "position", "from": {"data": {"url": "你的数据源路径"}, "key": "position", "fields": ["salary"]}},
    {"calculate": "datum.salary < datum.lower_bound || datum.salary > datum.upper_bound ? datum.salary : null", "as": "outlier_salary"},
    // 生成±0.2范围内的随机偏移（可根据分类宽度调整）
    {"calculate": "random() * 0.4 - 0.2", "as": "x_jitter"}
  ],
  "layer": [
    // 绘制基础箱线图
    {
      "mark": "boxplot",
      "encoding": {
        "x": {"field": "position", "type": "nominal"},
        "y": {"field": "salary", "type": "quantitative"}
      }
    },
    // 绘制带抖动的异常值点
    {
      "mark": "point",
      "encoding": {
        "x": {"field": "position", "type": "nominal", "offset": {"expr": "datum.x_jitter"}},
        "y": {"field": "outlier_salary", "type": "quantitative"},
        "color": {"value": "#ff4d4f"}
      },
      "transform": [{"filter": "datum.outlier_salary !== null"}]
    }
  ]
}

关键注意事项 #

• 调整x_jitter的计算范围（示例中random() * 0.4 - 0.2对应±0.2的偏移），避免抖动后的点跨到其他职位的分类区域。
• 确保异常值的筛选逻辑与箱线图的统计计算规则一致，防止出现数据偏差。
• 若异常值数量较多，可适当缩小偏移范围，避免点过度重叠影响可读性。

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