如何根据选择动态更改为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编辑器。
选择只能过滤列值,不能过滤列名。幸运的是,您可以使用Fold Transform将列名转换为列值。
为了完成您想要的,我建议以下内容:
放在一起,看起来像这样(在vega编辑器中打开):
{
"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
}
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句