Vega-Lite：是否可以根据 date/time 范围定义选择？

Question

对于这个含糊的问题深表歉意，我不太确定如何完整地表达我想做的事情，这对我寻找解决方案一点帮助都没有！我是 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>

提前感谢任何有见识的人！

Answer 1

如果您使用颜色的测试条件，您可以直接指定您想要的值，而不是通过自定义比例间接定义它们。

例如(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
}

Vega-Lite：是否可以根据 date/time 范围定义选择？

Vega-Lite: is it possible to define a selection based on date/time range?

visualization

vega-lite