Цветовые схемы

Роль цветовых схем в геовизуализации

Цветовые схемы в Kepler.gl являются одним из ключевых механизмов преобразования сырых геоданных в интерпретируемую визуальную информацию. Цвет в данном контексте выступает не декоративным элементом, а способом кодирования измерений: категорий, интенсивности, плотности, временных интервалов или агрегированных значений.

В основе системы лежит принцип data-driven styling, при котором визуальные свойства слоя напрямую зависят от данных и параметров визуализации.

Архитектура цветового управления в Kepler.gl

Цветовая логика встроена в состояние визуализации (visState) и определяется на уровне слоёв (layers). Каждый слой содержит собственную конфигурацию цветового отображения:

  • colorField — поле данных, влияющее на цвет
  • colorScale — тип шкалы (категориальная, количественная, логарифмическая)
  • colorRange — набор цветов или палитра
  • visConfig — визуальные параметры слоя

Пример фрагмента конфигурации:

const config = {
  visState: {
    layers: [
      {
        id: 'points-layer',
        type: 'point',
        config: {
          dataId: 'dataset_1',
          colorField: {
            name: 'category',
            type: 'string'
          },
          colorScale: 'ordinal',
          visConfig: {
            colorRange: {
              name: 'Global Warming',
              type: 'qualitative',
              category: 'Uber',
              colors: ['#5A1846', '#900C3F', '#C70039', '#FF5733', '#FFC300']
            },
            opacity: 0.8,
            strokeColor: [255, 255, 255]
          }
        }
      }
    ]
  }
};

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

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

Категориальная шкала (ordinal)

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

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

Характерные особенности:

  • отсутствие интерполяции
  • жёсткое соответствие «значение → цвет»

Линейная шкала (linear)

Применяется к непрерывным числовым данным.

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

Пример:

colorScale: 'quantile'

Дополнительно встречаются вариации:

  • quantize
  • log
  • sqrt

Биннинговые шкалы (quantile / quantize)

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

  • quantile — равное количество объектов в каждом интервале
  • quantize — равные интервалы значений

Палитры цветов (colorRange)

Цветовые палитры в Kepler.gl задаются через объект colorRange, который может быть предопределённым или пользовательским.

Структура:

  • name — название палитры
  • type — тип (qualitative, sequential, diverging)
  • colors — массив HEX-значений

Пример:

colorRange: {
  name: 'Custom Heat',
  type: 'sequential',
  colors: ['#000004', '#3b0f70', '#8c2981', '#de4968', '#fe9f6d', '#fcfdbf']
}

Встроенные цветовые схемы

Kepler.gl содержит набор встроенных палитр, оптимизированных для различных задач визуализации:

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

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

Цвета в различных типах слоёв

Каждый тип слоя имеет собственную специфику применения цветовых схем.

Point layer

Цвет задаётся на основе точечных объектов.

  • поддерживает категориальные и количественные шкалы
  • может комбинировать fillColor и strokeColor

Arc layer

Цвет используется для отображения связей между точками.

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

Polygon layer

Полигональные данные используют цвет для заполнения областей.

  • основной параметр — fillColor
  • поддерживается агрегация по атрибутам

Hexagon layer

Агрегационный слой, где цвет отражает плотность объектов.

  • используется colorAggregation
  • значение может быть count, average, sum

Пример:

{
  type: 'hexagon',
  config: {
    colorAggregation: 'average',
    colorField: {
      name: 'value',
      type: 'integer'
    }
  }
}

Heatmap layer

Цветовая схема здесь напрямую отражает плотность точек.

  • используется непрерывный градиент
  • высокая плотность соответствует «тёплым» цветам

Привязка цвета к данным

Основной механизм работы цветовых схем основан на связывании поля данных с визуальным параметром:

  • числовые поля → градиенты
  • строковые поля → категориальные цвета
  • агрегированные значения → биннинговые шкалы

Пример:

colorField: {
  name: 'population',
  type: 'integer'
}

Пользовательские цветовые диапазоны

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

Возможные подходы:

  • фиксированный массив HEX
  • генерация через внешние библиотеки (например, d3-scale)
  • динамическое создание палитр на основе статистики данных

Пример динамической генерации:

import { scaleSequential } from 'd3-scale';
import { interpolateViridis } from 'd3-scale-chromatic';

const scale = scaleSequential(interpolateViridis).domain([0, 100]);

Альфа-канал и прозрачность

Цветовая схема в Kepler.gl тесно связана с параметром прозрачности:

  • opacity — общая прозрачность слоя
  • strokeOpacity — прозрачность обводки
  • fillOpacity — прозрачность заливки

Комбинация цвета и прозрачности влияет на читаемость плотных слоёв и перекрывающихся объектов.

Влияние агрегации на цвет

При использовании агрегирующих слоёв цвет перестаёт быть характеристикой отдельного объекта и становится функцией группы:

  • сумма значений в ячейке
  • среднее значение
  • количество точек

Это изменяет смысл цветовой шкалы: она отражает не объект, а статистическое свойство области.

Производительность цветового рендеринга

При работе с большими наборами данных цветовые вычисления выполняются на уровне WebGL через deck.gl, что позволяет:

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

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

Совместимость цветовых схем между слоями

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

  • одинаковые палитры для разных типов слоёв
  • синхронизация шкал для сравнимых метрик
  • единые правила интерпретации значений

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

Оглавление