Vega Lite: Normalized Stacked Bar Chart + Overlay percentages as text

Question

I have a stacked normalized bar chart similar to this: https://vega.github.io/editor/#/examples/vega-lite/stacked_bar_normalize I'm trying to show the related percentages (per bar segment) as text on the bars similar to: https://gist.github.com/pratapvardhan/00800a4981d43a84efdba0c4cf8ee2e1

I tried adding a transform field to calculate the percentages, but still couldn't get it to work after hours of trying. I'm lost help ???? My best try:

{
  "description":
    "A bar chart showing the US population distribution of age groups and gender in 2000.",
  "data": {
    "url": "data/population.json"
  },
  "transform": [
    {"filter": "datum.year == 2000"},
    {"calculate": "datum.sex == 2 ? 'Female' : 'Male'", "as": "gender"},
    {
      "stack": "people",
      "offset": "normalize",
      "as": ["v1", "v2"],
      "groupby": ["age"],
      "sort": [{"field": "gender", "order": "descending"}]
    }
  ],
  "encoding": {
    "y": {
      "field": "v1",
      "type": "quantitative",
      "title": "population"
    },
    "y2": {"field": "v2"},
    "x": {
      "field": "age",
      "type": "ordinal"
    },
    "color": {
      "field": "gender",
      "type": "nominal",
      "scale": {
        "range": ["#675193", "#ca8861"]
      }
    }
  },
  "layer":[
{ "mark": "bar"},
{"mark": {"type": "text", "dx": 0, "dy": 0},
      "encoding": {
        "color":{"value":"black"},
        "text": { "field": "v1", "type": "quantitative", "format": ".1f"}}
    }

  ]
}

jakevdp jakevdp · Accepted Answer · 2021-03-15T13:53:08

You can use a joinaggregate transform to normalize each group, and then use "format": ".1%" to display fractions as percents. Using this, there is no need to manually compute the stack transform; it is simpler to specify the stack via the encoding, as in the example you linked to.

Here is the result (open in editor):

{
  "description": "A bar chart showing the US population distribution of age groups and gender in 2000.",
  "data": {"url": "data/population.json"},
  "transform": [
    {"filter": "datum.year == 2000"},
    {"calculate": "datum.sex == 2 ? 'Female' : 'Male'", "as": "gender"},
    {
      "joinaggregate": [{"op": "sum", "field": "people", "as": "total"}],
      "groupby": ["age"]
    },
    {"calculate": "datum.people / datum.total", "as": "fraction"}
  ],
  "encoding": {
    "y": {
      "aggregate": "sum",
      "field": "people",
      "title": "population",
      "stack": "normalize"
    },
    "order": {"field": "gender", "sort": "descending"},
    "x": {"field": "age", "type": "ordinal"},
    "color": {
      "field": "gender",
      "type": "nominal",
      "scale": {"range": ["#675193", "#ca8861"]}
    }
  },
  "layer": [
    {"mark": "bar"},
    {
      "mark": {"type": "text", "dx": 20, "dy": 0, "angle": 90},
      "encoding": {
        "color": {"value": "white"},
        "text": {"field": "fraction", "type": "quantitative", "format": ".1%"}
      }
    }
  ]
}

Vega Lite: Normalized Stacked Bar Chart + Overlay percentages as text

1 Answers