Vega-Lite: возможно ли определить выбор на основе диапазона даты / времени? - PullRequest
Новая
       14

Vega-Lite: возможно ли определить выбор на основе диапазона даты / времени?

1 голос
/ 02 апреля 2020

Извиняюсь за расплывчатый вопрос, я не слишком уверен, как полностью сформулировать то, что я хочу сделать, что совсем не помогло в моем поиске решений! Я довольно новичок в javascript и vega-lite, но пытаюсь повысить свой уровень. Поэтому я работаю над данными COVID19, предоставленными Министерством здравоохранения Новой Зеландии, и смотрю, как я могу визуализировать данные. Если мне интересен вот мой грубый сайт до сих пор: https://sirselim.github.io/covid_analysis/

Я пытаюсь определить все дни, которые были заблокированы здесь, в Новой Зеландии, начиная с 26 марта 2020 года, и отобразить они другого цвета, см. ниже для моего текущего решения, которое я считаю, 95% пути там:


enter image description here

Итак, у меня есть по сути, то, что я хочу отображать, однако я вручную определяю даты в элементе scale, что не похоже на правильный способ сделать что-то. Я бы подумал, что смогу определить диапазон дат, и он применил бы форматирование к датам, попадающим в определенный диапазон. Другой, меньший твик, который я хотел бы сделать, - это не перечисление дат в легенде, а просто [синий] без блокировки и [оранжевый] блокировки.

Вот код: 

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

Заранее благодарим всех, кто хоть немного разбирается!

1 Ответ

1 голос
/ 02 апреля 2020

Если вы используете тестовое условие для цвета, вы можете указать нужные значения напрямую, а не определять их косвенно через пользовательский масштаб.

Например ( редактор vega ): 

{
  "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

...