jsonchartsvisualizationvega-litevega

Facing issues in plotting stacked bar chart with binning applied in vega lite

I am trying to plot the stacked bar chart with binning applied on it with the below vega lite spec:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "height": "container",
  "width": "container",
  "data": {
    "values": [
      {
        "Date": "2024-08-09",
        "country": "India",
        "population": 87,
        "injured": 87
      },
      {
        "Date": "2024-08-09",
        "country": "India",
        "population": 90,
        "injured": 80
      },
      {
        "Date": "2024-08-09",
        "country": "India",
        "population": 100,
        "injured": 77
      },
      {
        "Date": "2024-08-10",
        "country": "India",
        "population": 59,
        "injured": 50
      },
      {
        "Date": "2024-08-09",
        "country": "China",
        "population": 60,
        "injured": 30
      },
      {
        "Date": "2024-08-10",
        "country": "China",
        "population": 44,
        "injured": 40
      },
      {
        "Date": "2024-08-09",
        "country": "USA",
        "population": 78,
        "injured": 45
      },
      {
        "Date": "2024-08-10",
        "country": "USA",
        "population": 33,
        "injured": 20
      },
      {
        "Date": "2024-08-09",
        "country": "France",
        "population": 45,
        "injured": 24
      },
      {
        "Date": "2024-08-10",
        "country": "France",
        "population": 50,
        "injured": 29
      },
      {
        "Date": "2024-08-09",
        "country": "Italy",
        "population": 60,
        "injured": 23
      },
      {
        "Date": "2024-08-10",
        "country": "Italy",
        "population": 95,
        "injured": 87
      },
      {
        "Date": "2024-08-10",
        "country": "Italy",
        "population": 105,
        "injured": 87
      }
    ]
  },
  "transform": [
    {"bin": true, "field": "injured", "as": ["bin_start", "bin_end"]},
    {
      "aggregate": [
        {"op": "sum", "field": "population", "as": "total_population"}
      ],
      "groupby": ["country", "bin_start", "bin_end"]
    }
  ],
  "mark": {"type": "bar", "tooltip": true},
  "encoding": {
    "x": {
      "field": "bin_start",
      "type": "quantitative",
      "axis": {"title": "Injured"}
    },
    "x2": {"field": "bin_end"},
    "y": {"field": "total_population", "type": "quantitative", "stack": true},
    "color": {"field": "country", "type": "nominal"}
  }
}

But the output of this vega lite spec is not working as expected and I am getting vertical gaps in all the binned bars as shown in the attached image.

Can anyone please help me in correcting the above vega lite spec? Also please note that I have added bin and aggregate in the transform array instead of the encoding channels intentionally because I want to perform further more transformations.

Thank you so much in advance!

Solution

  • enter image description here

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "height": "container",
  "width": "container",
  "data": {
    "values": [
      {
        "Date": "2024-08-09",
        "country": "India",
        "population": 87,
        "injured": 87
      },
      {
        "Date": "2024-08-09",
        "country": "India",
        "population": 90,
        "injured": 80
      },
      {
        "Date": "2024-08-09",
        "country": "India",
        "population": 100,
        "injured": 77
      },
      {
        "Date": "2024-08-10",
        "country": "India",
        "population": 59,
        "injured": 50
      },
      {
        "Date": "2024-08-09",
        "country": "China",
        "population": 60,
        "injured": 30
      },
      {
        "Date": "2024-08-10",
        "country": "China",
        "population": 44,
        "injured": 40
      },
      {"Date": "2024-08-09", "country": "USA", "population": 78, "injured": 45},
      {"Date": "2024-08-10", "country": "USA", "population": 33, "injured": 20},
      {
        "Date": "2024-08-09",
        "country": "France",
        "population": 45,
        "injured": 24
      },
      {
        "Date": "2024-08-10",
        "country": "France",
        "population": 50,
        "injured": 29
      },
      {
        "Date": "2024-08-09",
        "country": "Italy",
        "population": 60,
        "injured": 23
      },
      {
        "Date": "2024-08-10",
        "country": "Italy",
        "population": 95,
        "injured": 87
      },
      {
        "Date": "2024-08-10",
        "country": "Italy",
        "population": 105,
        "injured": 87
      }
    ]
  },
  "transform": [
    {"bin": true, "field": "injured", "as": ["bin_start", "bin_end"]},
    {
      "aggregate": [
        {"op": "sum", "field": "population", "as": "total_population"}
      ],
      "groupby": ["country", "bin_start", "bin_end"]
    },
    {
      "stack": "total_population",
      "offset": "zero",
      "as": ["v1", "v2"],
      "groupby": ["bin_start"]
    }
  ],
  "mark": {"type": "bar", "tooltip": true},
  "encoding": {
    "x": {
      "field": "bin_start",
      "type": "quantitative",
      "axis": {"title": "Injured"}
    },
    "x2": {"field": "bin_end"},
    "y": {"field": "v2", "type": "quantitative"},
    "y2": {"field": "v1"},
    "color": {"field": "country", "type": "nominal"}
  }
}