Поле range: именованные диапазоны

В спецификациях Vega и Vega-Lite поле range определяет область выходных значений шкалы (scale) — то, во что преобразуются данные после применения домена (domain). В отличие от domain, который работает с данными, range задаёт визуальное пространство: пиксели, цвета, символы, шаги сетки и другие эстетические параметры.

Официальная документация: Vega documentation Официальная документация Vega-Lite: Vega-Lite documentation

Шкала в Vega/Vega-Lite задаётся как функция отображения:

data value (domain) → visual value (range)

range может принимать разные формы:

  • массив значений (числа, цвета, строки)
  • именованные диапазоны (ключевые слова)
  • ссылки на размеры (width, height)
  • схемы (color schemes)
  • объектные формы (step, padding и др.)

Ключевая особенность: range часто не является фиксированным набором, а вычисляется контекстно.

Именованные диапазоны как встроенные ключи

Привязка к размерам визуализации

Наиболее часто используемые именованные диапазоны:

  • "width" — ширина визуализации
  • "height" — высота визуализации

Пример Vega-Lite:

{
  "mark": "circle",
  "encoding": {
    "x": {
      "field": "value",
      "type": "quantitative",
      "scale": {
        "range": "width"
      }
    }
  }
}

Здесь range: "width" означает:

минимум шкалы → x = 0
максимум шкалы → x = width

Аналогично:

"range": "height"

используется для вертикальных шкал.

Поведение именованных диапазонов

Именованные диапазоны:

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

Это критично в responsive-графиках.

Категориальные и цветовые именованные диапазоны

В Vega существует набор предопределённых диапазонов для категорий и цветов.

Категориальные диапазоны

Пример:

{
  "scale": {
    "type": "ordinal",
    "range": "category"
  }
}

"category" — это встроенный набор дискретных цветов.

Аналоги:

  • "category10"
  • "category20"
  • "tableau10"

Они используются для:

  • группировок
  • легенд
  • цветового кодирования категорий

Цветовые схемы как range

Часто range задаётся через схемы:

{
  "scale": {
    "type": "linear",
    "range": {
      "scheme": "blues"
    }
  }
}

Схемы поддерживают:

  • sequential (blues, greens)
  • diverging (redblue)
  • categorical (tableau10)

Здесь range уже не массив, а объект с семантикой генерации.

Числовые диапазоны и step-based range

Фиксированные числовые диапазоны

{
  "scale": {
    "range": [0, 400]
  }
}

Это полностью эквивалентно ручному заданию пиксельного пространства.

Step-диапазоны

Step используется для дискретных шкал:

{
  "scale": {
    "range": {
      "step": 20
    }
  }
}

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

  • bar charts
  • heatmaps с фиксированными ячейками
  • сетках категорий

Фактически:

position = index * step

Именованные диапазоны в Vega (низкоуровневый вариант)

В Vega диапазоны могут ссылаться на именованные ресурсы через signals и scales.

Пример:

"scales": [
  {
    "name": "xscale",
    "type": "linear",
    "domain": {"data": "table", "field": "x"},
    "range": "width"
  }
]

Здесь "width" — сигнал окружения, который автоматически вычисляется runtime.

Vega-Lite: ограничения и упрощения range

В Vega-Lite поле range намеренно упрощено по сравнению с Vega:

Поддерживаются:

  • "width"
  • "height"
  • "symbol"
  • "category"
  • "ordinal"
  • {scheme: ...}
  • [number, number]

Не поддерживаются:

  • сложные signal-выражения напрямую
  • пользовательские runtime range-вычисления

Vega-Lite компилирует range в Vega-уровень.

Перевод Vega-Lite → Vega

Пример:

"scale": {
  "range": "width"
}

компилируется в Vega как:

"range": {"signal": "width"}

Таким образом:

  • Vega-Lite → декларативный уровень
  • Vega → сигналы и вычисления

Типовые сценарии использования именованных range

1. Автоматическая адаптация к размеру

"range": "width"

Используется для оси X.

2. Вертикальное позиционирование

"range": "height"

Используется для Y-оси (обычно инвертированной).

3. Категории данных

"range": "category10"

Применяется для цветового кодирования групп.

4. Количественные градиенты

"range": {
  "scheme": "viridis"
}

Используется для heatmap и density plots.

5. Дискретная раскладка

"range": {
  "step": 15
}

Используется для band scales.

Частые ошибки при использовании range

Ошибка: смешивание типов range

"range": ["width", "height"]

Такой вариант некорректен: именованные диапазоны не комбинируются массивом.

Ошибка: использование color scheme без ordinal/linear контекста

"scale": {
  "type": "ordinal",
  "range": {
    "scheme": "blues"
  }
}

Для ordinal шкал это допустимо, но для quantitative без интерполяции может давать неожиданный результат.

Ошибка: фиксированный range при responsive layout

"range": [0, 500]

В responsive-визуализациях это ломает адаптивность, так как контейнер может быть меньше или больше.

Поведение range в зависимости от типа шкалы

Linear scale

domain → continuous numeric range

range интерполируется линейно.

Ordinal scale

domain → discrete set → range items

Каждому элементу домена соответствует отдельный элемент range.

Band scale

domain → segments of continuous range

Используется step, padding и alignment.

Point scale

domain → points in range

Каждому значению соответствует центр позиции.

Взаимодействие range с padding и alignment

range часто работает совместно с:

  • padding
  • paddingInner
  • paddingOuter

Пример:

{
  "scale": {
    "type": "band",
    "range": "width",
    "padding": 0.2
  }
}

Здесь range задаёт базовое пространство, а padding изменяет распределение внутри него.

Итоговая модель поведения range

Формально:

range = f(environment, scaleType, encoding, scheme)

где:

  • environment → width/height/signal
  • scaleType → linear, ordinal, band
  • encoding → color, position, size
  • scheme → генерация значений

Поле range в Vega/Vega-Lite является одним из ключевых механизмов связывания данных с визуальным пространством, и именно именованные диапазоны позволяют создавать адаптивные, переносимые и декларативно управляемые визуализации без жёсткой привязки к пиксельной сетке.

Оглавление