Search code examples
powerbivega-litevegadeneb

Vega-Lite / Deneb grouped bar chart

I am trying to use the code for Gantt chart provided by HoosierBi in his youtube video, but not to show 100% Gantt chart, but to achive grouped bar chart. I would like to see projects grouped by country with start date = today (hardcoded in example below) and end date = project target date.

The problem i have is that the space representing each group (in my example group = country) is not dynamically adjusted to number of bars (marked green on the image). So if country A has 1 project and country B has 7 projects then the space for each group is determined by the country with 7 projects (the country with highest count of projects).

Question: Is there a way to adjust the space in a dynamic way (so it reflects the number of data points/bars)

enter image description here

Here is the code I am using at the moment:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
      {
        "name": "A",
        "country": "BBB",
        "_Date_Target": "2023-02-20",
        "_Date_Today": "2023-05-03"
      },
      {
        "name": "A1",
        "country": "AAA",
        "_Date_Target": "2023-01-10",
        "_Date_Today": "2023-05-03"
      },
      {
        "name": "B",
        "country": "BBB",
        "_Date_Target": "2023-08-21",
        "_Date_Today": "2023-05-03"
      },
      {
        "name": "E",
        "country": "AAA",
        "_Date_Target": "2023-09-01",
        "_Date_Today": "2023-05-03"
      },
      {
        "name": "F",
        "country": "AAA",
        "_Date_Target": "2023-08-15",
        "_Date_Today": "2023-05-03"
      },
      {
        "name": "G",
        "country": "AAA",
        "_Date_Target": "2023-11-20",
        "_Date_Today": "2023-05-03"
      }
    ]
  },
  "height": {"step": 15},
  "layer": [
    {
      "layer": [{"mark": {"type": "bar", "tooltip": true}}],
      "encoding": {
        "yOffset": {"field": "name"},
        "x": {
          "field": "_Date_Today",
          "type": "temporal",
          "axis": {
            "title": null,
            "format": "%b-%y",
            "grid": true,
            "gridWidth": 1,
            "gridColor": "grey",
            "gridDash": [4, 4],
            "gridOpacity": {
              "condition": {
                "test": {"field": "value", "timeUnit": "month", "equal": 1},
                "value": 0.6
              },
              "value": 0
            }
          }
        },
        "y": {
          "field": "country",
          "type": "nominal",
          "axis": {
            "title": null,
            "grid": true,
            "tickBand": "extent"
          }
        },
        "x2": {"field": "_Date_Target"}
      }
    },
    {
      "mark": {"type": "rule", "color": "red"},
      "encoding": {"x": {"field": "_Date_Today", "type": "temporal"}}
    }
  ]
}

And here is the link to vega editor:

https://vega.github.io/editor/#/url/vega-lite/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykBaADZ04JACyUAVhDYA7EABoQAEySYUqUMSSCGcCGgDaoWUgRw0IAIKKQUNg1mYATgE9LAIS+2A+gBE1OB8AFSRnMjhMSwAmAAZogGZ+eP443wDMIOC2VXd0OMTkgFZkhJAAXwUTMwt0KwBGW3tHFzzrKxslf0CQsIio-Pik2Pr+etj0nuzcmKHi0oqqkFNzTyaHJzdPby6MrL7I2cLYgA5Uxt2pnKQ2guGS2LLK6tX0AFF1lq26jsnM3vCh0GxwAnMkLiBuv9pjcjvcFs9ljVLAAxT6bNodTqQvYA-pw5JnepFP5Za63OaxB5PJYrWogADi6NalixpLxQJAdzGozSl2h5IJVIRAF1Khg4DQyFg0KAIJkcGhieLBDc4M4jKBVa51ZqQMhnABrWUgTCuHD0phhWyYNhsQSYGiK1AuPTlcoipRwWT2ZQ0WRkE2uADyADNQxAgaBQzQ4IJlJY6YsQAAPE0xuMJ9BQskzJRmi2WTIIHBsZw6WxIFM0AyaU10QS1WQMQSCJShsvIAYgACkTH4PfcSjIzhoWddcGHo+UAHUx-QlVOxwBhe1lywjuBDkAjscBCAwIxiBRiT076fBnBIKB0PKgeyyP2OuQmzLy9Ox+OWbS6Cz5mjmAAqrIdCWAgcgLl6ACODAVqg9Tij+ehoLElAAGyIToyGoLE7rineIAZl+6DNBiNrmvSshsAg-oVkoVY1q+DZNi2bbnmOaATv+UCGh4SCPpYcAppkTgVOKKbRB+maWDmHJRHhSwGsadYFvSzgtn+dhrhq6DOHACbit6vr+oGdZpnWRFZjiVx5qaFFFogpbloIYkeuUQA

I've tried setting innerBand and this kind of options, also tried Facet but then again each facet is taking same amount of space as for the country with highest count of projects...

Solution

  • By using a facet setup you could get a possible result. Set the spacing to a negative value to get the facets very close to each other. Something like this?

    By the way you may want to switch to v5.json.

    enter image description here

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {
        "name": "A",
        "country": "BBB",
        "_Date_Target": "2023-02-20",
        "_Date_Today": "2023-05-03"
      },
      {
        "name": "A1",
        "country": "AAA",
        "_Date_Target": "2023-01-10",
        "_Date_Today": "2023-05-03"
      },
      {
        "name": "B",
        "country": "BBB",
        "_Date_Target": "2023-08-21",
        "_Date_Today": "2023-05-03"
      },
      {
        "name": "E",
        "country": "AAA",
        "_Date_Target": "2023-09-01",
        "_Date_Today": "2023-05-03"
      },
      {
        "name": "F",
        "country": "AAA",
        "_Date_Target": "2023-08-15",
        "_Date_Today": "2023-05-03"
      },
      {
        "name": "G",
        "country": "AAA",
        "_Date_Target": "2023-11-20",
        "_Date_Today": "2023-05-03"
      }
    ]
  },
  "spacing": -8,
  "facet": {
    "row": {
      "field": "country",
      "type": "ordinal",
      "header": {"title": null, "labelAngle": 0}
    }
  },
  "spec": {
    "height": {"step": 25},
    "layer": [
      {
        "mark": {"type": "bar", "tooltip": true},
        "encoding": {
          "y": {
            "field": "name",
            "type": "nominal",
            "axis": {"title": null, "grid": false, "tickBand": "extent"}
          },
          "x": {
            "field": "_Date_Today",
            "type": "temporal",
            "axis": {
              "title": null,
              "format": "%b-%y",
              "grid": true,
              "gridWidth": 1,
              "gridColor": "grey",
              "gridDash": [4, 4],
              "gridOpacity": {
                "condition": {
                  "test": {"field": "value", "timeUnit": "month", "equal": 1},
                  "value": 0.5
                },
                "value": 0
              }
            }
          },
          "x2": {"field": "_Date_Target"}
        }
      },
      {
        "mark": {"type": "rule", "color": "red"},
        "encoding": {"x": {"field": "_Date_Today", "type": "temporal"}}
      }
    ]
  },
  "resolve": {"scale": {"y": "independent"}},
  "config": {"view": {"stroke": "silver"}}
}

    Adam