Компонент HeatMap: базовая конфигурация

Компонент HeatMap в библиотеке @nivo/heatmap предназначен для визуализации матриц значений, где интенсивность цвета отражает величину данных. Он применяется для анализа корреляций, распределений, активности по категориям и временным интервалам.

Основой визуализации является двумерная таблица, представленная массивом объектов. Каждый объект описывает строку, а ключи внутри него — значения по колонкам.

Пример базовой структуры:

const data = [
  {
    id: "rowA",
    data: [
      { x: "Jan", y: 12 },
      { x: "Feb", y: 18 },
      { x: "Mar", y: 7 }
    ]
  },
  {
    id: "rowB",
    data: [
      { x: "Jan", y: 22 },
      { x: "Feb", y: 5 },
      { x: "Mar", y: 14 }
    ]
  }
];

Ключевые элементы структуры:

  • id — идентификатор строки (ось Y)
  • x — категория по оси X
  • y — числовое значение, определяющее цвет ячейки

HeatMap ожидает именно такой формат, где данные уже агрегированы и подготовлены до визуализации.

Базовая конфигурация компонента

Минимальная настройка HeatMap включает передачу данных, ключей и индексации строк.

import { ResponsiveHeatMap } from '@nivo/heatmap';

<ResponsiveHeatMap
  data={data}
  keys={["Jan", "Feb", "Mar"]}
  indexBy="id"
/>

Однако в большинстве случаев требуется более детальная настройка.

Параметры keys и indexBy

keys определяет список колонок, которые будут отображаться по оси X.

keys={["Jan", "Feb", "Mar"]}

indexBy указывает поле, используемое как идентификатор строки:

indexBy="id"

Если структура данных нестандартная, например:

{
  row: "A",
  values: [...]
}

тогда:

indexBy="row"

Настройка отступов и размеров

HeatMap поддерживает управление внутренними отступами через margin.

margin={{ top: 60, right: 90, bottom: 60, left: 90 }}
  • top — пространство над графиком
  • right — отступ справа
  • bottom — нижний отступ
  • left — левый отступ

Эти параметры критичны при размещении HeatMap внутри dashboard-интерфейсов, где важно избежать наложения подписей.

Цветовая схема и визуальная интерпретация

Один из ключевых аспектов HeatMap — это цветовая шкала.

colors={{
  type: 'sequential',
  scheme: 'blues'
}}

Также возможно использование кастомных цветов:

colors={["#f7fbff", "#08306b"]}

или более сложных диапазонов:

colors={{
  type: 'diverging',
  scheme: 'red_yellow_blue'
}}

Особенности цветовой логики:

  • низкие значения окрашиваются в светлые тона
  • высокие значения — в насыщенные
  • diverging используется для анализа отклонений от центра

Оформление ячеек

HeatMap позволяет управлять внешним видом каждой ячейки через cellShape и cellOpacity.

cellShape="rect"
cellOpacity={1}

Возможные формы:

  • rect — прямоугольник (по умолчанию)
  • circle — круг
  • кастомные SVG-компоненты

Пример полупрозрачных ячеек:

cellOpacity={0.85}

Подписи значений

Для отображения чисел внутри ячеек используется параметр enableLabels.

enableLabels={true}

Цвет текста может автоматически адаптироваться:

labelTextColor={{
  from: 'color',
  modifiers: [['darker', 3]]
}}

Или задаваться явно:

labelTextColor="#ffffff"

Оси координат

HeatMap поддерживает настройку всех четырёх осей.

Верхняя ось

axisTop={{
  tickSize: 5,
  tickPadding: 5,
  tickRotation: -45,
  legend: '',
  legendOffset: 36
}}

Нижняя ось

axisBottom={{
  tickSize: 5,
  tickPadding: 5,
  tickRotation: 0,
  legend: 'Месяцы',
  legendPosition: 'middle',
  legendOffset: 46
}}

Левая ось

axisLeft={{
  tickSize: 5,
  tickPadding: 5,
  tickRotation: 0,
  legend: 'Категории',
  legendPosition: 'middle',
  legendOffset: -60
}}

Правая ось

axisRight={null}

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

Отступы между ячейками

Плотность HeatMap регулируется через padding.

padding={2}
  • 0 — плотная сетка без промежутков
  • 1–3 — стандартный визуальный баланс
  • 4+ — увеличенные интервалы для акцента на отдельных значениях

Подсветка и интерактивность

HeatMap поддерживает hover-эффекты и выделение активной ячейки.

hoverTarget="cell"

Дополнительно:

inactiveOpacity={0.3}
activeOpacity={1}

При наведении можно изменять стиль через theme:

theme={{
  tooltip: {
    container: {
      fontSize: '12px'
    }
  }
}}

Легенда и шкала значений

Для интерпретации данных добавляется легенда:

legends={[
  {
    anchor: 'bottom',
    translateX: 0,
    translateY: 30,
    length: 200,
    thickness: 8,
    direction: 'row',
    tickPosition: 'after',
    tickSize: 3,
    tickSpacing: 4,
    tickOverlap: false,
    title: 'Интенсивность',
    titleAlign: 'start',
    titleOffset: 4
  }
]}

Легенда особенно важна при использовании непрерывных цветовых шкал.

Полная базовая конфигурация

<ResponsiveHeatMap
  data={data}
  keys={["Jan", "Feb", "Mar"]}
  indexBy="id"
  margin={{ top: 60, right: 90, bottom: 60, left: 90 }}
  padding={2}
  colors={{ type: 'sequential', scheme: 'blues' }}
  enableLabels={true}
  cellShape="rect"
  cellOpacity={1}
  axisTop={null}
  axisRight={null}
  axisBottom={{
    tickSize: 5,
    tickPadding: 5,
    tickRotation: 0,
    legend: 'Месяцы',
    legendPosition: 'middle',
    legendOffset: 46
  }}
  axisLeft={{
    tickSize: 5,
    tickPadding: 5,
    tickRotation: 0,
    legend: 'Категории',
    legendPosition: 'middle',
    legendOffset: -60
  }}
  labelTextColor={{ from: 'color', modifiers: [['darker', 3]] }}
  inactiveOpacity={0.3}
  hoverTarget="cell"
/>

Поведение при отсутствии данных

Если значение y отсутствует или равно null, ячейка отображается как пустая. Это требует предварительной обработки данных:

  • замена null на 0 при необходимости плотной сетки
  • либо явное исключение категории
  • либо использование кастомного цвета для пустых значений через emptyColor
emptyColor="#f0f0f0"

Ограничения базовой конфигурации

При использовании только базовых настроек HeatMap:

  • отсутствует сложная агрегация данных
  • не выполняется автоматическая нормализация
  • требуется ручная подготовка структуры
  • масштабирование значений задаётся внешними средствами

Эти особенности определяют архитектурную роль компонента: визуализация, а не обработка данных.

Оглавление