Преобразование heatmap

Преобразование heatmap ≥ 5.8 превращает входные растровые сетки (матрицы) в изображения тепловых карт. Оно подходит для показа двумерных растровых данных, оценок плотности и математических функций в виде цветовой сетки.

На вход подаётся растровая сетка чисел, а на выходе получается растровое изображение Canvas, которое можно вывести примитивом image. Размеры Canvas совпадают с размерами входной сетки; видимые размеры изображения задаются свойствами ширины и высоты примитива. Полный пример показан в контурной диаграмме.

Параметры преобразования

Свойство	Тип	Описание
field	Field	Поле с растровой сеткой. Если не задано, сам объект данных считается сеткой.
color	Color \| Expr	Постоянный цвет или выражение для цвета каждого пикселя. Выражение получает объект `datum` с полями `$x`, `$y`, `$value` и `$max`. По умолчанию серый цвет `"#888"`.
opacity	Number \| Expr	Постоянная непрозрачность или выражение для каждого пикселя. Выражение получает объект `datum` с полями `$x`, `$y`, `$value` и `$max`. По умолчанию используется `$value / $max`.
resolve	String	Способ определения максимума `datum.$max` для нескольких сеток. При `"independent"` (по умолчанию) максимум рассчитывается отдельно для каждой; при `"shared"` используется один общий максимум.
as	String	Имя выходного поля для созданного изображения Canvas (по умолчанию `"image"`).

Использование

Тепловая карта двумерной плотности

Пример строит тепловую карту двумерной ядерной оценки плотности. Предшествующее преобразование kde2d берёт координаты точек в пикселях из полей x_value и y_value, а сигналы width и height задают область расчёта. Для карты используется постоянный синий color; прозрачность opacity определяется нормированным значением сетки. Выражение ниже совпадает с поведением по умолчанию при отсутствии параметра opacity.

{
  "type": "kde2d",
  "x": "x_value",
  "y": "y_value",
  "size": [{"signal": "width"}, {"signal": "height"}],
  "as": "grid"
},
{
  "type": "heatmap",
  "field": "grid",
  "color": "steelblue",
  "opacity": {"expr": "datum.$value / datum.$max"}
}

Тепловая карта математической функции

Пример строит тепловую карту двумерной синусоидальной функции. Входной объект задаёт ширину и высоту изображения без готовых значений сетки. Пользовательское выражение берёт координаты пикселя $x и $y и цветовую шкалу, чтобы заполнить изображение.

{
  "signals": [
    {"name": "scale", "value": 0.05}
  ],
  "scales": [
    {
      "name": "color",
      "type": "linear",
      "domain": [-1, 1],
      "range": {"scheme": "spectral"}
    }
  ],
  "data": [
    {
      "name": "heatmap",
      "values": [{"width": 150, "height": 100}],
      "transform": [
        {
          "type": "heatmap",
          "color": {
            "expr": "scale('color', sin(scale * (datum.$x + datum.$y)) * sin(scale * (datum.$x - datum.$y)))"
          },
          "opacity": 1
        }
      ]
    }
  ]
}