Vega-Lite:是否可以根据 date/time 范围定义选择?
Vega-Lite: is it possible to define a selection based on date/time range?
对于这个含糊的问题深表歉意,我不太确定如何完整地表达我想做的事情,这对我寻找解决方案一点帮助都没有!我是 javascript 和 vega-lite 的新手,但我正在努力提高技能。因此,我正在研究新西兰卫生部提供的 COVID19 数据,并研究如何可视化这些数据。如果感兴趣,这是我到目前为止的粗略网站:https://sirselim.github.io/covid_analysis/
我正在尝试定义自 2020 年 3 月 26 日以来在新西兰这里处于封锁状态的所有日期,并以不同的颜色显示这些日期,请参见下面我当前的解决方案,我相信 95%那里:
所以我基本上已经有了我想要显示的内容,但是我在 scale
元素中手动定义日期,这似乎不是正确的做事方式。我原以为我应该能够定义一个日期范围,它会将格式应用于定义范围内的日期。我想做的另一个更小的调整不是在图例中列出日期,而是 [blue] no lockdown 和 [orange] lockdown。
代码如下:
<!DOCTYPE html>
<html>
<head>
<title>Embedding Vega-Lite</title>
<script src="https://cdn.jsdelivr.net/npm/vega@5.10.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4.9.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.5.2"></script>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
var yourVlSpec = {
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"width": 580,
"height": 200,
"padding": 5,
"description": "simple vega-lite chart with linked data",
"title": "Confirmed COVID cases in NZ DHBs",
"data": {
"url": "https://raw.githubusercontent.com/sirselim/covid_analysis/master/data//NZCOVID_confirmed_formatted.json"
},
"transform": [{
"sort": [{"field": "Date of report"}],
"window": [{"op": "count", "field": "count", "as": "cumulative_count"}],
"frame": [null, 0]
}],
"mark": {
"type": "bar",
"tooltip": true
},
"encoding": {
"x": {
"field": "Date of report",
"type": "nominal"
},
"y": {
"field": "cumulative_count",
"type": "quantitative"
},
"color": {
"value": "steelblue",
"condition": {
"test": {
"field": "Date of report",
"range": [
"2020-03-26",
"2020-04-30"
]
},
"field": "Date of report",
"title": "Days in lockdown",
"type": "nominal",
"scale": {
"domain": [
"2020-03-26",
"2020-03-27",
"2020-03-28",
"2020-03-29",
"2020-03-30",
"2020-03-31",
"2020-04-01"
],
"range": [
"#FFA500",
"#FFA500"
]
}
}
}
}
};
vegaEmbed('#vis', yourVlSpec);
</script>
</body>
</html>
提前感谢任何有见识的人!
如果您使用颜色的测试条件,您可以直接指定您想要的值,而不是通过自定义比例间接定义它们。
例如(vega editor):
{
"title": "Confirmed COVID cases in NZ DHBs",
"data": {
"url": "https://raw.githubusercontent.com/sirselim/covid_analysis/master/data//NZCOVID_confirmed_formatted.json"
},
"transform": [
{
"sort": [{"field": "Date of report"}],
"window": [{"op": "count", "field": "count", "as": "cumulative_count"}],
"frame": [null, 0]
}
],
"mark": {"type": "bar", "tooltip": true},
"encoding": {
"x": {"field": "Date of report", "type": "nominal"},
"y": {"field": "cumulative_count", "type": "quantitative"},
"color": {
"value": "steelblue",
"condition": {
"test": {"field": "Date of report", "gt": "2020-03-26"},
"value": "orange"
}
}
},
"width": 580,
"height": 200
}
对于这个含糊的问题深表歉意,我不太确定如何完整地表达我想做的事情,这对我寻找解决方案一点帮助都没有!我是 javascript 和 vega-lite 的新手,但我正在努力提高技能。因此,我正在研究新西兰卫生部提供的 COVID19 数据,并研究如何可视化这些数据。如果感兴趣,这是我到目前为止的粗略网站:https://sirselim.github.io/covid_analysis/
我正在尝试定义自 2020 年 3 月 26 日以来在新西兰这里处于封锁状态的所有日期,并以不同的颜色显示这些日期,请参见下面我当前的解决方案,我相信 95%那里:
所以我基本上已经有了我想要显示的内容,但是我在 scale
元素中手动定义日期,这似乎不是正确的做事方式。我原以为我应该能够定义一个日期范围,它会将格式应用于定义范围内的日期。我想做的另一个更小的调整不是在图例中列出日期,而是 [blue] no lockdown 和 [orange] lockdown。
代码如下:
<!DOCTYPE html>
<html>
<head>
<title>Embedding Vega-Lite</title>
<script src="https://cdn.jsdelivr.net/npm/vega@5.10.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4.9.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.5.2"></script>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
var yourVlSpec = {
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"width": 580,
"height": 200,
"padding": 5,
"description": "simple vega-lite chart with linked data",
"title": "Confirmed COVID cases in NZ DHBs",
"data": {
"url": "https://raw.githubusercontent.com/sirselim/covid_analysis/master/data//NZCOVID_confirmed_formatted.json"
},
"transform": [{
"sort": [{"field": "Date of report"}],
"window": [{"op": "count", "field": "count", "as": "cumulative_count"}],
"frame": [null, 0]
}],
"mark": {
"type": "bar",
"tooltip": true
},
"encoding": {
"x": {
"field": "Date of report",
"type": "nominal"
},
"y": {
"field": "cumulative_count",
"type": "quantitative"
},
"color": {
"value": "steelblue",
"condition": {
"test": {
"field": "Date of report",
"range": [
"2020-03-26",
"2020-04-30"
]
},
"field": "Date of report",
"title": "Days in lockdown",
"type": "nominal",
"scale": {
"domain": [
"2020-03-26",
"2020-03-27",
"2020-03-28",
"2020-03-29",
"2020-03-30",
"2020-03-31",
"2020-04-01"
],
"range": [
"#FFA500",
"#FFA500"
]
}
}
}
}
};
vegaEmbed('#vis', yourVlSpec);
</script>
</body>
</html>
提前感谢任何有见识的人!
如果您使用颜色的测试条件,您可以直接指定您想要的值,而不是通过自定义比例间接定义它们。
例如(vega editor):
{
"title": "Confirmed COVID cases in NZ DHBs",
"data": {
"url": "https://raw.githubusercontent.com/sirselim/covid_analysis/master/data//NZCOVID_confirmed_formatted.json"
},
"transform": [
{
"sort": [{"field": "Date of report"}],
"window": [{"op": "count", "field": "count", "as": "cumulative_count"}],
"frame": [null, 0]
}
],
"mark": {"type": "bar", "tooltip": true},
"encoding": {
"x": {"field": "Date of report", "type": "nominal"},
"y": {"field": "cumulative_count", "type": "quantitative"},
"color": {
"value": "steelblue",
"condition": {
"test": {"field": "Date of report", "gt": "2020-03-26"},
"value": "orange"
}
}
},
"width": 580,
"height": 200
}