使用 Vega Lite 进行可视化："emoji undefined"

Question

我正在尝试在 Vega Lite (https://vega.github.io/vega-lite/examples/isotype_bar_chart_emoji.html) 中重现可视化效果。我没有选择动物表情符号，而是选择了象征能量来源的表情符号。但是我的代码不起作用，看起来 Vega 无法识别标记为“未定义”的表情符号。我怎样才能帮助 vega 让它使用表情符号作为徽标？

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "config": {"view": {"stroke": ""}},
  "width": 800,
  "height": 200,
  "data": {
    "values": [
{"continent": "Africa", "share": "coal"},
{"continent": "Africa", "share": "coal"},
{"continent": "Africa", "share": "gas"},
{"continent": "Europe", "share": "gas"},
{"continent": "Europe", "share": "gas"},
{"continent": "Europe", "share": "hydro"},
{"continent": "Europe", "share": "nuclear"},
{"continent": "Europe", "share": "renewables"},
{"continent": "Europe", "share": "renewables"},
{"continent": "Europe", "share": "renewables"},
{"continent": "Europe", "share": "renewables"},
{"continent": "Europe", "share": "renewables"}
    ]
  },
  "transform": [
    {
      "calculate": "{'coal': '', 'nuclear': '⚛️', 'oil': '️','renewables':'♻️','gas':'⛽'}",
      "as": "emoji"
    },
    {"window": [{"op": "rank", "as": "rank"}], "groupby": ["continent", "share"]}
  ],
  "mark": {"type": "text", "baseline": "middle"},
  "encoding": {
    "x": {"field": "rank", "type": "ordinal", "axis": null},
    "y": {"field": "share", "type": "nominal", "axis": null, "sort": null},
    "row": {"field": "continent", "header": {"title": ""}},
    "text": {"field": "emoji", "type": "nominal"},
    "size": {"value": 65}
  }
}

Answer 1

转换计算不正确，您可以使用 datum 从您的数据访问该字段，并根据条件提供 emoji 值。参考下面的代码或 editor

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "config": {"view": {"stroke": ""}},
  "width": 800,
  "height": 200,
  "data": {
    "values": [
      {"continent": "Africa", "share": "coal"},
      {"continent": "Africa", "share": "coal"},
      {"continent": "Africa", "share": "gas"},
      {"continent": "Europe", "share": "gas"},
      {"continent": "Europe", "share": "gas"},
      {"continent": "Europe", "share": "hydro"},
      {"continent": "Europe", "share": "nuclear"},
      {"continent": "Europe", "share": "renewables"},
      {"continent": "Europe", "share": "renewables"},
      {"continent": "Europe", "share": "renewables"},
      {"continent": "Europe", "share": "renewables"},
      {"continent": "Europe", "share": "renewables"}
    ]
  },
  "transform": [
    {
      "calculate": "datum.share == 'coal' ?  '' : datum.share == 'nuclear' ? '⚛️' : datum.share == 'oil' ? '️' : datum.share == 'renewables' ?'♻️' : '⛽'",
      "as": "emoji"
    },
    {
      "window": [{"op": "rank", "as": "rank"}],
      "groupby": ["continent", "share"]
    }
  ],
  "mark": {"type": "text", "baseline": "middle"},
  "encoding": {
    "x": {"field": "rank", "type": "ordinal", "axis": null},
    "y": {"field": "share", "type": "nominal", "axis": null, "sort": null},
    "row": {"field": "continent", "header": {"title": ""}},
    "text": {"field": "emoji", "type": "nominal"},
    "size": {"value": 65}
  }
}

或者简单地将此行添加到您当前的代码中也可以解决问题：

{
  "calculate": "{'coal': '', 'nuclear': '⚛️', 'oil': '️','renewables':'♻️','gas':'⛽', 'hydro': '',}[datum.share]",
  "as": "emoji"
}

使用 Vega Lite 进行可视化："emoji undefined"

Visualisation with Vega Lite : "emoji undefined"

javascript

data-visualization

vega

vega-lite