Цветовые схемы: встроенные палитры

Общая модель цветовых схем

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

Ключевая концепция:

  • domain — множество входных значений (категории, числовые диапазоны)
  • range — набор цветов или цветовая схема
  • scale type — определяет поведение преобразования (ordinal, categorical, sequential, diverging)

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

Категориальные палитры (Categorical Schemes)

Категориальные схемы предназначены для дискретных данных: классов, категорий, групп.

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

  • category10
  • category20
  • category20b
  • category20c
  • tableau10
  • tableau20

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

Пример использования в Vega-Lite

{
  "mark": "bar",
  "encoding": {
    "x": {"field": "category", "type": "nominal"},
    "y": {"field": "value", "type": "quantitative"},
    "color": {
      "field": "category",
      "type": "nominal",
      "scale": {
        "scheme": "tableau10"
      }
    }
  }
}

Особенности:

  • Автоматическое распределение цветов по категориям
  • При превышении количества цветов происходит циклическое повторение
  • Подходит для до ~10–20 категорий (в зависимости от схемы)

Последовательные цветовые схемы (Sequential Schemes)

Последовательные палитры используются для числовых данных, где важен порядок: интенсивность, величина, плотность.

Основные встроенные схемы:

  • blues
  • greens
  • greys
  • oranges
  • purples
  • reds
  • viridis
  • magma
  • inferno
  • plasma

Эти схемы обычно основаны на градиентах или perceptually uniform colormaps.

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

{
  "mark": "rect",
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative"},
    "color": {
      "field": "value",
      "type": "quantitative",
      "scale": {
        "scheme": "viridis"
      }
    }
  }
}

Особенности:

  • Поддержка интерполяции цвета по числовому диапазону
  • Хорошо подходит для heatmap, density plots, географических данных
  • Некоторые схемы оптимизированы для восприятия людьми с нарушениями цветового зрения

Дивергентные схемы (Diverging Schemes)

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

Типичные схемы:

  • blueorange
  • brownbluegreen
  • purplegreen
  • redblue
  • redgreyblue

Структура:

  • два контрастных цветовых направления
  • центральный нейтральный цвет

Пример применения

{
  "mark": "rect",
  "encoding": {
    "color": {
      "field": "delta",
      "type": "quantitative",
      "scale": {
        "scheme": "redblue",
        "domainMid": 0
      }
    }
  }
}

Особенности:

  • Чёткое визуальное разделение положительных и отрицательных значений
  • Требует корректного определения центральной точки (domainMid)
  • Часто используется в финансовых и статистических визуализациях

Ордinal схемы (Ordinal Schemes)

Ordinal-палитры используются для упорядоченных категорий, где важен порядок, но не величина.

Примеры схем:

  • blues (в ordinal контексте)
  • greens
  • purples
  • reds

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

Настройка схем через scale в Vega-Lite

В Vega-Lite цветовая схема задаётся через объект scale:

"color": {
  "field": "group",
  "type": "nominal",
  "scale": {
    "scheme": "set2"
  }
}

Дополнительные параметры:

  • count — количество цветов в палитре
  • extent — диапазон (для sequential/diverging)
  • domain — ручное определение входных значений

Ограничение количества цветов

"scale": {
  "scheme": "category10",
  "count": 5
}

Это позволяет контролировать подмножество палитры.

Цветовые схемы через Vega config

В Vega глобальные настройки палитр задаются через config.scale:

{
  "config": {
    "scale": {
      "scheme": "tableau10"
    }
  }
}

Также можно переопределять поведение конкретных типов шкал:

{
  "config": {
    "range": {
      "category": ["#1f77b4", "#ff7f0e", "#2ca02c"]
    }
  }
}

Отличия встроенных схем Vega и Vega-Lite

Хотя обе системы используют общую идеологию, различия проявляются в уровне абстракции:

Vega

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

Vega-Lite

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

Механика scheme и count

Пара scheme + count определяет, сколько цветов будет извлечено из палитры:

{
  "scale": {
    "scheme": "set3",
    "count": 8
  }
}

Поведение:

  • если count < max scheme size — используется подмножество
  • если count > scheme size — происходит интерполяция или циклирование

Интерполяционные схемы

Некоторые схемы поддерживают непрерывную интерполяцию:

  • viridis
  • magma
  • inferno
  • plasma

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

Практика выбора схем

Выбор схемы зависит от структуры данных:

  • категориальные → category10, tableau10
  • числовые → viridis, blues
  • отклонения → redblue, purplegreen
  • большие наборы категорий → tableau20

Глобальные темы и переиспользование палитр

В Vega и Vega-Lite цветовые схемы могут быть централизованы через конфигурацию тем:

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

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

Сопоставление схем с типами шкал

Тип данных Тип шкалы Примеры схем
Категории ordinal category10, tableau10
Порядковые ordinal set2, set3
Числовые sequential viridis, blues
Отклонения diverging redblue, purplegreen

Поведение при нехватке цветов

При превышении количества категорий доступных цветов:

  • повторение цветов (cycle)
  • генерация промежуточных оттенков
  • fallback к дефолтной палитре

Это поведение зависит от типа схемы и реализации шкалы.

Работа с кастомными схемами

Хотя встроенные палитры покрывают большинство задач, допускается определение собственного диапазона:

"scale": {
  "range": ["#22223b", "#4a4e69", "#9a8c98", "#c9ada7", "#f2e9e4"]
}

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

Оглавление