问题描述
如何根据选择动态更改为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","Events": "110","Hour": "1",
可视化效果如下图所示,并根据选择动态更新:
当我的代码是静态的时,它看起来像这样:
"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。
解决方法
选择只能过滤列值,不能过滤列名。幸运的是,您可以使用Fold Transform将列名转换为列值。
要完成您想要的工作,我建议以下内容:
- 使用一系列Calculate Transforms计算包含您要显示的值的新列。
- 使用Fold Transform将这些值堆叠到具有关联键列的单个列中。
- 将选择绑定链接到在折叠转换中创建的键列。
- 使用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","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
}
}
}