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 transform 对每个组进行归一化，然后使用 "format": ".1%" 将分数显示为百分比。使用它，无需手动计算堆栈变换；通过编码指定堆栈更简单，如您链接到的示例所示。

这是结果 (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：规范化堆叠条形图 + 叠加百分比作为文本

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

stacked-chart

vega-lite