Как реализовать правила для цветового диапазона в vega lite?

В приведенном ниже примере Vega-Lite я настроил цветовую шкалу в кодировке, чтобы она представляла собой диапазон красного, белого и зеленого. Однако я хотел бы изменить способ привязки шкалы к значениям. Например, значения между минимальным значением и 16 изменятся с красного на белый (стиль тепловой карты), а затем значения между 16 и максимальным значением изменятся с белого на зеленый.

Я также включил скриншот того, чего я пытаюсь достичь. Спасибо за любую помощь!

Это то, к чему я стремлюсь, ноль - это статическая средняя точка, где отрицательные значения не отображаются ни одним зеленым цветом, а положительные значения ни одним красным цветом

Ссылка на редактор Vega-Lite

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
      "url": "data/seattle-weather.csv"
  },
  "title": "Daily Max Temperatures (C) in Seattle, WA",
  "config": {
      "view": {
          "strokeWidth": 0,
          "step": 13
      },
      "axis": {
          "domain": false
      }
  },
  "mark": "rect",
  "encoding": {
      "x": {
          "field": "date",
          "timeUnit": "date",
          "type": "ordinal",
          "title": "Day",
          "axis": {
              "labelAngle": 0,
              "format": "%e"
          }
      },
      "y": {
          "field": "date",
          "timeUnit": "month",
          "type": "ordinal",
          "title": "Month"
      },
      "color": {
          "field": "temp_max",
          "aggregate": "max",
          "type": "quantitative",
          "scale": {
            "range": [
              "red",
              "white",
              "green"              
            ]
          },
          "legend": {
              "title": null
          }
      }
  }
}

Пожалуйста, поделитесь полной рабочей спецификацией и желаемым результатом.

David Bacci 19.11.2022 08:26

Привет, Дэвид, извини за это, я только что отредактировал, чтобы попытаться дать рабочий пример в контексте стандартной тепловой карты для простоты. Спасибо!

Nexter1 20.11.2022 00:06

Я опубликую ответ.

David Bacci 20.11.2022 10:04
Шаблоны Angular PrimeNg
Шаблоны Angular PrimeNg
Как привнести проверку типов в наши шаблоны Angular, использующие компоненты библиотеки PrimeNg, и настроить их отображение с помощью встроенной...
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
Документирование API с помощью Swagger на Springboot
Документирование API с помощью Swagger на Springboot
В предыдущей статье мы уже узнали, как создать Rest API с помощью Springboot и MySql .
Начала с розового дизайна
Начала с розового дизайна
Pink Design - это система дизайна Appwrite с открытым исходным кодом для создания последовательных и многократно используемых пользовательских...
Шлюз в PHP
Шлюз в PHP
API-шлюз (AG) - это сервер, который действует как единая точка входа для набора микросервисов.
14 Задание: Типы данных и структуры данных Python для DevOps
14 Задание: Типы данных и структуры данных Python для DevOps
проверить тип данных используемой переменной, мы можем просто написать: your_variable=100
1
3
54
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы имеете в виду что-то вроде этого? Вы можете настроить границы градиента, используя domainMin, Mid и Max.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/seattle-weather.csv"},
  "title": "Daily Max Temperatures (C) in Seattle, WA",
  "config": {"view": {"strokeWidth": 0, "step": 13}, "axis": {"domain": false}},
  "mark": "rect",
  "encoding": {
    "x": {
      "field": "date",
      "timeUnit": "date",
      "type": "ordinal",
      "title": "Day",
      "axis": {"labelAngle": 0, "format": "%e"}
    },
    "y": {
      "field": "date",
      "timeUnit": "month",
      "type": "ordinal",
      "title": "Month"
    },
    "color": {
      "field": "temp_max",
      "aggregate": "max",
      "type": "quantitative",
      "scale": {
        "range": ["red", "white", "green"],
        "interpolate": "cubehelix",
        "domainMax": 40,
        "domainMid": 16,
        "domainMin": 0
      },
      "legend": {"title": null}
    }
  }
}

ВАУ, не знал, что можно так манипулировать значениями домена в свойствах шкалы. Но теперь, конечно, когда я оглядываюсь назад на вега-лайт документацию, это действительно говорит об этом, полностью пропущено. Спасибо, Давид!!

Nexter1 21.11.2022 00:13

Если вам нужно больше контроля, вы также можете установить границы корзины.

David Bacci 21.11.2022 08:12

Другие вопросы по теме