Início / coding / Perguntas / 79377065
Accepted
Raghav Mittal
Asked: 2025-01-22 17:00:15 +0800 CST

Como podemos traçar sobreposições semanais no Vega Lite?

  • 772

Estou tentando criar um gráfico via Vega Lite onde quero traçar duas linhas, onde uma linha representa o valor real dos dados e a outra linha deve exibir os valores de uma semana antes, ou seja, sobreposição semana após semana.

Por exemplo, os dados de entrada são como abaixo:

Data total_de_visualizadores_diários
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

Então os dados transformados que devem ser produzidos pelo vega lite devem ficar assim:

Data total_de_visualizadores_diários WoW diário_total_visualizador
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

Para atingir esse tipo de comportamento usando a especificação vega lite, atualmente estou usando a transformação lookup. Consulte a especificação abaixo:

{
  "$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"}
      }
    }
  ]
}

Podemos obter o mesmo comportamento sem usar lookup com algumas transformações fáceis via vega lite?

json

1 respostas

  1. Best Answer

    Aqui está usando uma transformação de janela mais simples.

      {
  "$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"}
      }
    }
  ]
}
    • 1

relate perguntas