Search code examples
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"
      }
    ]
  }
}