Search code examples
visualizationvega-lite

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

Apologies for the vague question, I'm not too sure how to completely phrase what I'm wanting to do, which hasn't helped my searching for solutions at all! I'm pretty new to javascript and vega-lite but am trying to upskill. As such I'm working on COVID19 data made available by the New Zealand Ministry of Health, and looking at how I can visualise the data. If interested here is my rough site thus far: https://sirselim.github.io/covid_analysis/

I'm trying to define all days that have been in lockdown here in NZ, since the 26th March 2020, and display these in a different colour, see below for my current solution which is I believe 95% of the way there:


enter image description here

So I have essentially what I want being displayed, however I am manually defining the dates in the scale element, which doesn't seem like the correct way to do things. I would have thought I should be able to define a date range and it would apply the formatting to dates that fall in the defined range. The other, smaller, tweak I would like to make is not listing the dates in the legend but just have [blue] no lockdown and [orange] lockdown.

Here's the code:

<!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>

Thank you in advance to anyone with some insight!

Solution

  • If you're using a test condition for the color, you can specify the values you want directly, rather than defining them indirectly via a custom scale.

    For example (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
}

    enter image description here