vega-lite - 基于选择动态改变编码中的 Y 轴字段 Vega-Lite

Question

如何根据选择动态更改为 y 轴编码的数据字段？我正在尝试构建一个可视化来显示一天 24 小时内的事件计数数据，并且希望用户能够选择不同的时区(例如 EST、CST、MST 或 PST)。

为此，我构建了一个选择，在其中指定上面括号中列出的所有选项，并将 EST 设置为默认值。我想创建一个条件，当我选择 EST 之外的另一个选项时，我会看到可视化动态更新。我已经探索过专门为这些时间范围创建其他小时字段，或者添加条件逻辑来尝试考虑这些动态变化，但我还没有找到一个好的解决方案。有人可以帮忙吗？

这是我的几行数据的示例

"data": {
      "values": [
        {
          "title_column":"example",
          "Type": "Technology",
          "Events": "100",
          "Hour": "0",
          "Date": "9/1/20",
          "Time Period": "Last Time"
        },
        {
          "title_column":"example",
          "Type": "Technology",
          "Events": "110",
          "Hour": "1",
          "Date": "9/1/20",
          "Time Period": "Last Time"
        },

可视化组合在一起时看起来像这样，并根据选择动态更新:

当我的代码是静态的时，它看起来像这样:

    "layer":[
           {"mark":{
               "type":"bar",
               "point":true,
               "color":"#FFC94E",
               "height":15
           },
           "selection": {
        "timezone": {
          "type": "single",
          "init": {"changer": "EST"},
          "bind": {
            "changer": {"input": "select",
              "options": ["EST","CST (-1 Hour)","MST (-2 Hours)","PST (-3 Hours)"]}
          }
        }
      },
    "encoding":
        {
            "x":{"field":"Events",
            "type":"quantitative",
            "aggregate":"sum",
            "axis":null},
            "y": {"field":"Hour",
            "type":"ordinal",
            "axis":{
              "labelSeparation":1,
              "labelPadding":4,
              "title":null
            }
            }
        }}]
        }

但是，特别关注代码底部的 y 编码，我理想地希望使其动态化。我想我可以为每个时区创建计算，然后编写一个如下所示的条件，但我无法让它发挥作用。非常感谢任何帮助!

"y": {
            "condition": { 
            "selection": {"timezone" : "EST"},
            "datum": "datum.Hour"
              }
            "condition": { 
            "selection": {"timezone" : "CST (-1 Hour)"},
            "datum": "datum.Hour_CST"
              }
              ...
            }

这是我的代码的链接: vega editor .

Answer 1

选择只能过滤列值，不能过滤列名称。幸运的是，您可以使用 Fold Transform 将列名称转换为列值。 .

为了实现您想要的目标，我建议执行以下操作:

• 使用一系列 Calculate Transforms计算包含您要显示的值的新列。
• 使用 Fold Transform将这些值堆叠到具有关联键列的单个列中。
• 将选择绑定(bind)链接到折叠转换中创建的键列。
• 使用 Filter Transform根据选择过滤值
• 最后，添加行编码，以便在轴上标记所选列。

放在一起，看起来像这样(open in vega editor):

{
  "width": 300,
  "data": {
    "values": [...]
  },
  "transform": [
    {"filter": {"field": "Time Period", "equal": "Last Time"}},
    {"calculate": "datum.Hour - 0", "as": "EST"},
    {"calculate": "datum.Hour - 1", "as": "CST (-1 Hour)"},
    {"calculate": "datum.Hour - 2", "as": "MST (-2 Hours)"},
    {"calculate": "datum.Hour - 3", "as": "PST (-3 Hours)"},
    {
      "fold": ["EST", "CST (-1 Hour)", "MST (-2 Hours)", "PST (-3 Hours)"],
      "as": ["Zone", "Hour"]
    },
    {"filter": {"selection": "timezone"}}
  ],
  "selection": {
    "timezone": {
      "type": "single",
      "init": {"Zone": "EST"},
      "bind": {
        "Zone": {
          "name": "timezone",
          "input": "select",
          "options": [
            "EST",
            "CST (-1 Hour)",
            "MST (-2 Hours)",
            "PST (-3 Hours)"
          ]
        }
      }
    }
  },
  "mark": {"type": "bar", "point": true, "color": "#FFC94E", "height": 15},
  "encoding": {
    "x": {
      "field": "Events",
      "type": "quantitative",
      "aggregate": "sum",
      "axis": null
    },
    "y": {
      "field": "Hour",
      "type": "ordinal",
      "axis": {"labelSeparation": 1, "labelPadding": 4, "title": null}
    },
    "row": {
      "field": "Zone",
      "type": "nominal",
      "title": null
    }
  }
}