Vega Lite：标准化堆积条形图 + 叠加百分比作为文本

Question

我有一个类似于这样的堆叠标准化条形图： https://vega.github.io/editor/#/examples/vega-lite/stacked_bar_normalize我试图将相关百分比（每个条形段）显示为文本条类似于： https://gist.github.com/pratapvardhan/00800a4981d43a84efdba0c4cf8ee2e1

我尝试添加一个转换字段来计算百分比，但经过数小时的尝试仍然无法使其工作。 我失去了帮助我最好的尝试：

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

  ]
}

Answer 1

您可以使用joinaggregate 转换来规范化每个组，然后使用"format": ".1%"将分数显示为百分比。 使用它，无需手动计算堆栈变换； 正如您链接到的示例中那样，通过编码指定堆栈更简单。

这是结果（ 在编辑器中打开）：

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