在 vega-lite 中添加变换会隐藏数据

Question

我正在使用 vega-lite 构建一个简单的堆积条形图。 在 X 轴上 - 我们有一个国家/地区名称，在 Y 轴上我们有按产品名称堆叠的计数条 我的目标是在图表中显示排名前 3 的国家/地区。

工作示例此处。

完整工作代码

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A stacked bar chart showing the individual count by product and country.",
  
  "data": {
    "values": [
      {"product_name": "Product A", "country_name": "Country 1", "individual_count": 100},
      {"product_name": "Product B", "country_name": "Country 1", "individual_count": 150},
      {"product_name": "Product C", "country_name": "Country 1", "individual_count": 200},
      {"product_name": "Product D", "country_name": "Country 1", "individual_count": 50},
      {"product_name": "Product E", "country_name": "Country 1", "individual_count": 80},
      {"product_name": "Product A", "country_name": "Country 2", "individual_count": 120},
      {"product_name": "Product B", "country_name": "Country 2", "individual_count": 80},
      {"product_name": "Product C", "country_name": "Country 2", "individual_count": 150},
      {"product_name": "Product D", "country_name": "Country 2", "individual_count": 100},
      {"product_name": "Product E", "country_name": "Country 3", "individual_count": 60},
      {"product_name": "Product E", "country_name": "Country 3", "individual_count": 60},
      {"product_name": "Product E", "country_name": "Country 3", "individual_count": 60},
      {"product_name": "Product A", "country_name": "Country 3", "individual_count": 60},
      {"product_name": "Product C", "country_name": "Country 3", "individual_count": 60},
      {"product_name": "Product A", "country_name": "Country 4", "individual_count": 60},
      {"product_name": "Product C", "country_name": "Country 4", "individual_count": 90},
      {"product_name": "Product A", "country_name": "Country 5", "individual_count": 60},
      {"product_name": "Product C", "country_name": "Country 5", "individual_count": 60},
      {"product_name": "Product A", "country_name": "Country 5", "individual_count": 60},
      {"product_name": "Product C", "country_name": "Country 5", "individual_count": 90}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "country_name",
      "type": "nominal",
      "axis": {"labelAngle": -45},
      "sort": {"field": "individual_count", "order": "descending", "op": "sum"}
    },
    "y": {
      "aggregate": "sum",
      "field": "individual_count",
      "type": "quantitative",
      "title": "Total Individual Count"
    },
    "color": {"field": "product_name", "type": "nominal"},
    "tooltip": [
      {"field": "country_name", "type": "nominal"},
      {"field": "product_name", "type": "nominal"},
      {
        "aggregate": "sum",
        "field": "individual_count",
        "type": "quantitative",
        "title": "Individual Count"
      }
    ]
  }
}

如果我添加转换，我的图表将变为空白。我想添加此转换，以便可以显示前 3 个国家/地区（按堆栈总数）。不知道我做错了什么

  "transform": [
    {"aggregate": [{"op": "sum", "field": "individual_count", "as": "total_count"}], "groupby": ["country_name"]},
    {"window": [{"op": "rank", "field": "total_count", "as": "rank"}], "sort": [{"field": "total_count", "order": "descending"}]},
    {"filter": "datum.rank <= 3"}
  ],

Answer 1

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A stacked bar chart showing the individual count by product and country.",
  "data": {
    "values": [
      {
        "product_name": "Product A",
        "country_name": "Country 1",
        "individual_count": 100
      },
      {
        "product_name": "Product B",
        "country_name": "Country 1",
        "individual_count": 150
      },
      {
        "product_name": "Product C",
        "country_name": "Country 1",
        "individual_count": 200
      },
      {
        "product_name": "Product D",
        "country_name": "Country 1",
        "individual_count": 50
      },
      {
        "product_name": "Product E",
        "country_name": "Country 1",
        "individual_count": 80
      },
      {
        "product_name": "Product A",
        "country_name": "Country 2",
        "individual_count": 120
      },
      {
        "product_name": "Product B",
        "country_name": "Country 2",
        "individual_count": 80
      },
      {
        "product_name": "Product C",
        "country_name": "Country 2",
        "individual_count": 150
      },
      {
        "product_name": "Product D",
        "country_name": "Country 2",
        "individual_count": 100
      },
      {
        "product_name": "Product E",
        "country_name": "Country 3",
        "individual_count": 60
      },
      {
        "product_name": "Product E",
        "country_name": "Country 3",
        "individual_count": 60
      },
      {
        "product_name": "Product E",
        "country_name": "Country 3",
        "individual_count": 60
      },
      {
        "product_name": "Product A",
        "country_name": "Country 3",
        "individual_count": 60
      },
      {
        "product_name": "Product C",
        "country_name": "Country 3",
        "individual_count": 60
      },
      {
        "product_name": "Product A",
        "country_name": "Country 4",
        "individual_count": 60
      },
      {
        "product_name": "Product C",
        "country_name": "Country 4",
        "individual_count": 90
      },
      {
        "product_name": "Product A",
        "country_name": "Country 5",
        "individual_count": 60
      },
      {
        "product_name": "Product C",
        "country_name": "Country 5",
        "individual_count": 60
      },
      {
        "product_name": "Product A",
        "country_name": "Country 5",
        "individual_count": 60
      },
      {
        "product_name": "Product C",
        "country_name": "Country 5",
        "individual_count": 90
      }
    ]
  },
  "transform": [
    {
      "joinaggregate": [
        {"op": "sum", "field": "individual_count", "as": "total_count"}
      ],
      "groupby": ["country_name"]
    },
    {
      "window": [{"op": "dense_rank", "field": "total_count", "as": "rank"}],
      "sort": [{"field": "total_count", "order": "descending"}]
    },
    {"filter": "datum.rank <= 3"}
  ],
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "country_name",
      "type": "nominal",
      "axis": {"labelAngle": -45},
      "sort": {"field": "individual_count", "order": "descending", "op": "sum"}
    },
    "y": {
      "aggregate": "sum",
      "field": "individual_count",
      "type": "quantitative",
      "title": "Total Individual Count"
    },
    "color": {"field": "product_name", "type": "nominal"},
    "tooltip": [
      {"field": "country_name", "type": "nominal"},
      {"field": "product_name", "type": "nominal"},
      {
        "aggregate": "sum",
        "field": "individual_count",
        "type": "quantitative",
        "title": "Individual Count"
      }
    ]
  }
}