Тип rect

Тип rect в Vega и Vega-Lite представляет собой базовый графический примитив для отображения прямоугольников в декартовой системе координат. Он используется для построения тепловых карт, матриц значений, календарных визуализаций, агрегированных распределений и других визуальных структур, где данные естественно раскладываются по двум измерениям.

Ключевая особенность rect заключается в том, что каждый элемент визуализации определяется четырьмя границами: x, x2, y, y2. В Vega-Lite чаще применяются упрощённые формы задания через x, y и агрегированные или биннинговые каналы.

Базовая модель rect в Vega

В Vega rect описывается через mark и явные координаты границ:

{
  "type": "rect",
  "from": {"data": "table"},
  "encode": {
    "enter": {
      "x": {"scale": "xscale", "field": "x"},
      "x2": {"scale": "xscale", "field": "x2"},
      "y": {"scale": "yscale", "field": "y"},
      "y2": {"scale": "yscale", "field": "y2"},
      "fill": {"value": "steelblue"}
    }
  }
}

Основные свойства

  • x / x2 — левая и правая границы прямоугольника
  • y / y2 — верхняя и нижняя границы
  • fill — цвет заливки
  • stroke — обводка
  • opacity — прозрачность

Такой способ задаёт геометрию напрямую и даёт полный контроль над формой.

rect в Vega-Lite

В Vega-Lite тип rect используется как high-level абстракция, где координаты вычисляются автоматически через encoding.

Базовый пример тепловой карты

{
  "data": {
    "values": [
      {"x": 0, "y": 0, "v": 5},
      {"x": 1, "y": 0, "v": 10},
      {"x": 0, "y": 1, "v": 7},
      {"x": 1, "y": 1, "v": 3}
    ]
  },
  "mark": "rect",
  "encoding": {
    "x": {"field": "x", "type": "ordinal"},
    "y": {"field": "y", "type": "ordinal"},
    "color": {"field": "v", "type": "quantitative"}
  }
}

Здесь rect автоматически формируется как ячейка сетки.

Геометрическая интерпретация rect

Каждый прямоугольник определяется как область в пространстве:

  • по оси X задаётся интервал значений
  • по оси Y задаётся интервал значений
  • внутри области применяется визуальное кодирование (цвет, текстура)

В Vega-Lite эти интервалы часто выводятся из:

  • категориальных шкал (ordinal)
  • биннинга (bin: true)
  • агрегации (aggregate)

Использование с биннингом данных

rect особенно важен при построении гистограмм и распределений.

Гистограмма через rect

{
  "data": {"url": "data.json"},
  "mark": "rect",
  "encoding": {
    "x": {
      "bin": true,
      "field": "value"
    },
    "y": {
      "aggregate": "count"
    },
    "color": {
      "aggregate": "count"
    }
  }
}

Логика построения

  • bin: true разбивает числовую ось на интервалы
  • каждый интервал становится прямоугольником
  • высота определяется количеством элементов в бине
  • цвет может кодировать плотность

rect в тепловых матрицах

Одно из основных применений — heatmap.

Пример матрицы корреляций

{
  "data": {"values": [
    {"a": "X", "b": "X", "v": 1},
    {"a": "X", "b": "Y", "v": 0.4},
    {"a": "Y", "b": "X", "v": 0.4},
    {"a": "Y", "b": "Y", "v": 1}
  ]},
  "mark": "rect",
  "encoding": {
    "x": {"field": "a", "type": "nominal"},
    "y": {"field": "b", "type": "nominal"},
    "color": {"field": "v", "type": "quantitative"}
  }
}

Особенности визуального поведения

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

Управление размерами rect

В Vega-Lite размеры прямоугольников контролируются косвенно:

1. Через масштаб шкал

  • scale.rangeStep для ordinal-осей
  • padding внутри шкалы

2. Через биннинг

  • ширина = размер интервала bin
  • высота = агрегированное значение

3. Через explicit x2/y2 (Vega)

В Vega возможно явное управление:

"x2": {"value": 200}

Стилизация rect

Цветовые свойства

  • fill — основной цвет
  • fillOpacity — прозрачность заливки
  • stroke — контур
  • strokeWidth — толщина линии

Пример стилизации

"mark": {
  "type": "rect",
  "fill": "#4c78a8",
  "stroke": "white",
  "strokeWidth": 1,
  "opacity": 0.8
}

rect и порядок отрисовки

rect относится к базовым mark-типам с плоской геометрией. При рендеринге:

  • элементы не перекрываются по глубине (если не задано вручную)
  • порядок зависит от входных данных
  • при наложении важно учитывать прозрачность

Сравнение rect в Vega и Vega-Lite

Vega

  • ручное управление координатами
  • явные x2, y2
  • высокая гибкость
  • используется в кастомных визуализациях

Vega-Lite

  • декларативное описание
  • автоматическая генерация геометрии
  • интеграция с bin, aggregate, stack
  • оптимизирован для аналитических графиков

rect в сложных композициях

rect часто используется как фон или слой:

Фоновые полосы (background bands)

{
  "mark": "rect",
  "encoding": {
    "x": {"value": 0},
    "x2": {"value": 100},
    "y": {"value": 0},
    "y2": {"value": 50},
    "color": {"value": "#f0f0f0"}
  }
}

Слоистые визуализации

  • фоновые rect для диапазонов
  • поверх — линии или точки
  • используется в layered charts

Поведение rect при масштабировании

При изменении размеров графика:

  • Vega пересчитывает координаты через scales
  • rect сохраняет относительную геометрию
  • ordinal шкалы перераспределяют шаги
  • quantitative шкалы масштабируют интервалы

Типичные ошибки при использовании rect

  • использование количественных данных без биннинга в heatmap → приводит к разреженным ячейкам
  • отсутствие сортировки категорий → хаотичная сетка
  • смешивание ordinal и quantitative без явного масштаба → некорректные размеры
  • игнорирование padding → визуальная перегруженность

Производительность rect

rect относится к относительно дешёвым mark-типам:

  • отрисовывается как SVG-rect или canvas-rect
  • хорошо масштабируется до тысяч элементов
  • производительность падает при сложных фильтрах и анимациях
  • оптимально работает с предварительно агрегированными данными

Роль rect в экосистеме Vega

rect является фундаментом:

  • heatmaps
  • histograms
  • calendar views
  • treemap-like слоёв (в комбинации с layout)
  • background highlighting
  • grid-based dashboards

Его универсальность основана на простоте геометрии и прямой связи с прямоугольной декомпозицией данных.

Оглавление