Adding transform in vega-lite hides the data

I’m building a simple stacked bar chart using vega-lite.
On X-axis – we have a country name, on Y-axis we have bars of count stacked by product name
My goal is to show the top 3 countries in the chart.

Working example here.

Full Working Code

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

If I add a transformation, my chart becomes blank. I want to add this transformation so I can show top 3 countries (by stack total). Not sure what am I doing wrong

  "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"}
  ],