Пользовательские цветовые шкалы

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

Цветовая шкала в Vega определяется как отображение из домена значений (domain) в диапазон цветов (range). Это отображение может быть:

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

Классическая структура шкалы:

{
  "type": "linear",
  "domain": [0, 100],
  "range": ["#f7fbff", "#08306b"]
}

Здесь каждое значение из диапазона данных преобразуется в соответствующий цветовой градиент.

Типы цветовых шкал

Линейные шкалы

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

{
  "type": "linear",
  "domain": [0, 100],
  "range": ["#ffffff", "#ff0000"]
}

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

Логарифмические шкалы

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

{
  "type": "log",
  "domain": [1, 1000],
  "range": ["#e0f3db", "#43a2ca"]
}

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

Категориальные шкалы

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

{
  "type": "ordinal",
  "domain": ["A", "B", "C"],
  "range": ["#1f77b4", "#ff7f0e", "#2ca02c"]
}

Каждой категории соответствует фиксированный цвет.

Квантильные и квантовые шкалы

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

{
  "type": "quantile",
  "domain": [1, 2, 3, 4, 5, 6, 7, 8, 9],
  "range": ["#f7fcf5", "#c7e9c0", "#00441b"]
}

Эти шкалы обеспечивают равномерное распределение количества элементов по цветовым группам.

Пользовательские цветовые шкалы

Явное задание диапазона цветов

Наиболее прямой способ кастомизации — указание массива цветов:

{
  "type": "linear",
  "domain": [0, 1],
  "range": ["#000000", "#ffcc00", "#ffffff"]
}

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

Использование палитр

Vega-Lite и Vega поддерживают встроенные цветовые схемы:

{
  "color": {
    "field": "category",
    "type": "nominal",
    "scale": {
      "scheme": "tableau10"
    }
  }
}

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

Кастомизация схем через interpolation

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

{
  "type": "linear",
  "domain": [0, 100],
  "range": ["#2c7bb6", "#ffffbf", "#d7191c"],
  "interpolate": "hcl"
}

Популярные режимы интерполяции:

  • rgb — линейный в RGB пространстве
  • hcl — более равномерный визуально
  • lab — перцептуально равномерный

Цветовые шкалы в Vega-Lite

В Vega-Lite шкалы чаще всего задаются через encoding.color.scale.

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

{
  "mark": "bar",
  "encoding": {
    "x": {"field": "value", "type": "quantitative"},
    "color": {
      "field": "value",
      "type": "quantitative",
      "scale": {
        "domain": [0, 100],
        "range": ["#fee5d9", "#de2d26"]
      }
    }
  }
}

Перекрытие категорий цветами

{
  "encoding": {
    "color": {
      "field": "group",
      "type": "nominal",
      "scale": {
        "range": ["#4c78a8", "#f58518", "#e45756"]
      }
    }
  }
}

Здесь ручное задание диапазона полностью переопределяет стандартную палитру.

Цветовые шкалы в Vega

В Vega цветовые шкалы задаются через блок scales:

{
  "scales": [
    {
      "name": "colorScale",
      "type": "linear",
      "domain": {"data": "table", "field": "value"},
      "range": ["#f7fbff", "#08306b"]
    }
  ]
}

И далее применяются через encode:

{
  "marks": [
    {
      "type": "rect",
      "encode": {
        "update": {
          "fill": {"scale": "colorScale", "field": "value"}
        }
      }
    }
  ]
}

Домен и диапазон: принципы проектирования

Домен

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

  • фиксированный: [0, 100]
  • динамический: {"data": "table", "field": "value"}
  • вычисляемый через transform

Диапазон

Диапазон может быть:

  • массивом цветов
  • именем схемы
  • функцией интерполяции

Нормализация данных перед окрашиванием

Часто требуется нормализация:

  • min-max scaling
  • логарифмирование
  • биннинг

Пример концептуального трансформа:

{
  "transform": [
    {"calculate": "log(datum.value)", "as": "logValue"}
  ]
}

И затем использование logValue в шкале.

Продвинутые техники кастомных шкал

Условные цветовые шкалы

Через выражения:

{
  "color": {
    "condition": {
      "test": "datum.value > 50",
      "value": "#d73027"
    },
    "value": "#4575b4"
  }
}

Разрывные шкалы (binned scales)

{
  "scale": {
    "domain": [0, 20, 40, 60, 80, 100],
    "range": ["#f7fbff", "#deebf7", "#9ecae1", "#3182bd", "#08519c"]
  }
}

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

Дивергентные шкалы

Используются для данных с центральной точкой:

{
  "domain": [-100, 0, 100],
  "range": ["#d7191c", "#ffffbf", "#1a9641"]
}

Центр интерпретируется как нейтральное значение.

Управление цветом через сигналы (Vega)

В Vega возможно динамическое управление шкалами через signals:

{
  "signals": [
    {
      "name": "maxValue",
      "update": "data('table')[0].value"
    }
  ],
  "scales": [
    {
      "name": "color",
      "type": "linear",
      "domain": [0, {"signal": "maxValue"}],
      "range": ["#fff5f0", "#cb181d"]
    }
  ]
}

Это позволяет адаптировать цветовую шкалу в реальном времени.

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

Тип данных Рекомендуемая шкала
Числовые linear, log
Категории ordinal
Время time, sequential
Рейтинги quantile

Цветовые пространства и восприятие

Выбор цветового пространства критичен:

  • RGB — быстрый, но неравномерный
  • HCL — более естественный для восприятия
  • LAB — точная перцептуальная интерполяция
{
  "interpolate": "lab"
}

Использование perceptual interpolation снижает визуальные искажения при чтении данных.

Переиспользуемые темы и глобальные настройки

В Vega можно задавать глобальные цветовые темы:

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

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

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

Типичные проблемы:

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

Практика требует проверки шкал на:

  • контрастность
  • читаемость при сером фоне
  • различимость при дефиците цветового зрения

Композиция нескольких шкал в одной визуализации

В сложных диаграммах применяются разные шкалы одновременно:

  • цвет — категория
  • насыщенность — интенсивность
  • прозрачность — уверенность
{
  "encoding": {
    "color": {"field": "type", "type": "nominal"},
    "opacity": {"field": "confidence", "type": "quantitative"}
  }
}

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

Оглавление