Поле scale: глобальные настройки шкал

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

Базовая структура scale

Шкала описывается объектом, который включает минимум два ключевых параметра:

  • domain — входной диапазон данных
  • range — выходной визуальный диапазон

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

Пример базовой шкалы в Vega-Lite:

{
  "scale": {
    "domain": [0, 100],
    "range": [0, 500]
  }
}

В Vega (низкоуровневом формате) шкалы описываются аналогично, но чаще через явные определения в блоке scales.

Глобальные шкалы через конфигурацию

В Vega-Lite основная точка управления масштабами — объект config.scale. Он задаёт поведение шкал по умолчанию для всей спецификации.

{
  "config": {
    "scale": {
      "bandPaddingInner": 0.1,
      "bandPaddingOuter": 0.2,
      "pointPadding": 0.5,
      "useUnaggregatedDomain": false,
      "zero": true
    }
  }
}

Принцип наследования

Иерархия приоритета:

  1. scale, заданный внутри encoding
  2. scale, заданный на уровне конкретного поля (field definition)
  3. config.scale (глобальные настройки)
  4. дефолты Vega/Vega-Lite

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

Типы шкал и глобальные настройки поведения

Тип шкалы определяет математическое преобразование данных.

1. Linear scale

Наиболее часто используемая шкала:

  • используется для числовых данных
  • поддерживает непрерывный домен

Глобальные параметры:

{
  "config": {
    "scale": {
      "zero": true,
      "nice": true
    }
  }
}
  • zero — включает принудительное расширение домена до нуля
  • nice — округляет границы домена до «читаемых» значений

2. Logarithmic scale

Используется для данных с экспоненциальным ростом:

{
  "scale": {
    "type": "log",
    "base": 10
  }
}

Глобально:

{
  "config": {
    "scale": {
      "log": {
        "base": 10
      }
    }
  }
}

3. Time scale

Для временных рядов:

{
  "config": {
    "scale": {
      "time": {
        "clamp": true
      }
    }
  }
}
  • clamp ограничивает значения диапазоном domain

4. Ordinal scale

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

{
  "config": {
    "scale": {
      "bandPaddingInner": 0.15,
      "bandPaddingOuter": 0.1
    }
  }
}

Параметры domain и их глобальное влияние

useUnaggregatedDomain

Контролирует способ построения домена при агрегированных данных.

{
  "config": {
    "scale": {
      "useUnaggregatedDomain": true
    }
  }
}
  • true — домен строится по исходным данным
  • false — домен строится по агрегатам (min/max после агрегации)

Это критически влияет на визуализации с группировками и статистическими функциями.

domain implicit behavior

Если domain не задан явно, Vega-Lite вычисляет его автоматически:

  • числовые данные → min/max
  • временные → min/max дат
  • категориальные → уникальные значения

Глобальные настройки могут влиять на это через:

  • useUnaggregatedDomain
  • zero
  • nice

Настройки range: глобальные стили отображения

Color range

{
  "config": {
    "scale": {
      "range": {
        "category": "tableau10"
      }
    }
  }
}

Используются встроенные палитры Vega:

  • category
  • ordinal
  • ramp
  • heatmap

Numeric range

Для позиционных шкал:

{
  "config": {
    "scale": {
      "rangeStep": 20
    }
  }
}
  • задаёт шаг между категориями
  • влияет на ширину баров и расстояние между элементами

Padding и управление плотностью визуализации

Шкалы band/point поддерживают параметры отступов:

{
  "config": {
    "scale": {
      "bandPaddingInner": 0.2,
      "bandPaddingOuter": 0.3,
      "pointPadding": 0.5
    }
  }
}

bandPaddingInner

Регулирует расстояние между элементами внутри шкалы.

bandPaddingOuter

Определяет отступы по краям.

pointPadding

Используется для точечных шкал (scatter-like categorical layouts).

Nice и автоматическая «красота» шкалы

{
  "config": {
    "scale": {
      "nice": true
    }
  }
}

Функция nice:

  • округляет границы domain
  • улучшает читаемость осей
  • снижает «рваность» делений

В Vega это реализовано через расширение domain до «удобных» чисел (например, 97 → 100).

Clamp: ограничение значений

{
  "config": {
    "scale": {
      "clamp": true
    }
  }
}

Поведение:

  • значения меньше domain.min фиксируются на минимуме
  • значения больше domain.max фиксируются на максимуме

Используется для предотвращения выхода визуальных элементов за границы графика.

Reverse: инверсия шкалы

{
  "config": {
    "scale": {
      "reverse": true
    }
  }
}

Инвертирует направление отображения:

  • числовые оси становятся убывающими
  • категории отображаются в обратном порядке

Interpolate: глобальная интерполяция

Для цветовых и непрерывных шкал:

{
  "config": {
    "scale": {
      "interpolate": "rgb"
    }
  }
}

Варианты:

  • rgb
  • lab
  • hcl

Выбор интерполяции влияет на:

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

Композиция глобальных и локальных шкал

Глобальные настройки редко используются изолированно; их роль — формирование базовой линии поведения.

Пример взаимодействия:

{
  "config": {
    "scale": {
      "nice": true,
      "zero": true,
      "bandPaddingInner": 0.1
    }
  },
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "category",
      "type": "nominal"
    },
    "y": {
      "field": "value",
      "type": "quantitative",
      "scale": {
        "zero": false
      }
    }
  }
}

Здесь:

  • глобально включено zero: true
  • локально отключено zero для оси Y
  • остальные параметры наследуются

Scale resolution в составных визуализациях

В multi-view конструкциях Vega-Lite (facet, concat, repeat) шкалы могут:

  • разделяться (independent)
  • синхронизироваться (shared)
{
  "resolve": {
    "scale": {
      "x": "shared",
      "y": "independent"
    }
  }
}

Глобальные scale-настройки при этом применяются внутри каждого подграфа, если не переопределены.

Цветовые схемы как глобальные scale-параметры

{
  "config": {
    "scale": {
      "scheme": "category10"
    }
  }
}

Используется для унификации визуального стиля:

  • категориальные наборы цветов
  • градиенты для количественных данных
  • heatmap-палитры

Приоритет параметров scale в Vega-Lite

Полная иерархия:

  1. encoding.channel.scale
  2. field definition scale
  3. mark-specific scale
  4. config.scale
  5. Vega defaults

Эта система позволяет:

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

Роль scale в архитектуре Vega runtime

В Vega шкалы компилируются в runtime-компоненты:

  • domain computation
  • range mapping functions
  • event-driven updates при изменении данных

Изменение глобального config.scale приводит к:

  • пересборке scale pipeline
  • обновлению зависимых marks
  • пересчёту осей и легенд

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

Оглавление