我们如何在 vega lite 中绘制每周叠加图？

Question

我正在尝试通过 vega lite 创建一个图表，我想在其中绘制两条线，其中一条线代表实际数据值，另一条线应显示一周前的值，即逐周叠加。

例如输入数据如下：

日期	每日总观众数
2025-01-20	100
2025-01-19	200
2025-01-18	300
2025-01-17	400
2025-01-16	500
2025-01-15	600
2025-01-14	700
2025-01-13	900
2025-01-12	1000
2025-01-11	1100

然后 vega lite 生成的转换后的数据应如下所示：

日期	每日总观众数	魔兽世界每日总观众人数
2025-01-20	100	900
2025-01-19	200	1000
2025-01-18	300	1100
2025-01-17	400
2025-01-16	500
2025-01-15	600
2025-01-14	700
2025-01-13	900
2025-01-12	1000
2025-01-11	1100

为了使用 vega lite 规范实现这种行为，目前我正在使用查找转换。请参阅以下规格：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"date": "2025-01-20", "daily_total_viewer": 100},
      {"date": "2025-01-19", "daily_total_viewer": 200},
      {"date": "2025-01-18", "daily_total_viewer": 300},
      {"date": "2025-01-17", "daily_total_viewer": 400},
      {"date": "2025-01-16", "daily_total_viewer": 500},
      {"date": "2025-01-15", "daily_total_viewer": 600},
      {"date": "2025-01-14", "daily_total_viewer": 700},
      {"date": "2025-01-13", "daily_total_viewer": 900},
      {"date": "2025-01-12", "daily_total_viewer": 1000},
      {"date": "2025-01-11", "daily_total_viewer": 1100}
    ]
  },
  "transform": [
    {
      "calculate": "datetime(datum.date) - 7 * 24 * 60 * 60 * 1000",
      "as": "previous_week_date"
    },
    {
      "lookup": "previous_week_date",
      "from": {
        "data": {
          "values": [
            {"date": "2025-01-20", "daily_total_viewer": 100},
            {"date": "2025-01-19", "daily_total_viewer": 200},
            {"date": "2025-01-18", "daily_total_viewer": 300},
            {"date": "2025-01-17", "daily_total_viewer": 400},
            {"date": "2025-01-16", "daily_total_viewer": 500},
            {"date": "2025-01-15", "daily_total_viewer": 600},
            {"date": "2025-01-14", "daily_total_viewer": 700},
            {"date": "2025-01-13", "daily_total_viewer": 900},
            {"date": "2025-01-12", "daily_total_viewer": 1000},
            {"date": "2025-01-11", "daily_total_viewer": 1100}
          ]
        },
        "key": "date",
        "fields": ["daily_total_viewer"]
      },
      "as": ["WOW_daily_total_viewer"]
    }
  ],
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal", "title": "Date"},
        "y": {"field": "daily_total_viewer", "type": "quantitative"},
        "color": {"value": "blue", "title": "Current Week"}
      }
    },
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal", "title": "Date"},
        "y": {"field": "WOW_daily_total_viewer", "type": "quantitative"},
        "color": {"value": "orange", "title": "Previous Week"}
      }
    }
  ]
}

我们可以在不使用查找的情况下通过 vega lite 进行一些简单的转换来实现相同的行为吗？

Answer 1

这里使用了更简单的窗口变换。

  {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"date": "2025-01-20", "daily_total_viewer": 100},
      {"date": "2025-01-19", "daily_total_viewer": 200},
      {"date": "2025-01-18", "daily_total_viewer": 300},
      {"date": "2025-01-17", "daily_total_viewer": 400},
      {"date": "2025-01-16", "daily_total_viewer": 500},
      {"date": "2025-01-15", "daily_total_viewer": 600},
      {"date": "2025-01-14", "daily_total_viewer": 700},
      {"date": "2025-01-13", "daily_total_viewer": 900},
      {"date": "2025-01-12", "daily_total_viewer": 1000},
      {"date": "2025-01-11", "daily_total_viewer": 1100}
    ]
  },
  "transform": [
    {
      "sort": [{"field": "date"}],
      "window": [
        {
          "op": "lag",
          "param": 7,
          "field": "daily_total_viewer",
          "as": "WOW_daily_total_viewer"
        }
      ],
      "frame": [null, 0]
    }
  ],
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal", "title": "Date"},
        "y": {"field": "daily_total_viewer", "type": "quantitative"},
        "color": {"value": "blue", "title": "Current Week"}
      }
    },
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal", "title": "Date"},
        "y": {"field": "WOW_daily_total_viewer", "type": "quantitative"},
        "color": {"value": "orange", "title": "Previous Week"}
      }
    }
  ]
}