javascriptjsonchartsvisualizationvega-lite

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

Solution

  • enter image description here

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