RGB (Red, Green, Blue) представляет собой аддитивную модель формирования цвета, в которой итоговый цвет получается путём сложения трёх компонент с различной интенсивностью. В цифровой графике каждая компонента обычно кодируется числом в диапазоне 0–255 или нормализованным значением 0–1.
В контексте D3.js RGB является базовым представлением, используемым
внутри модуля цвета d3-color. Объекты цвета часто создаются
через d3.rgb(r, g, b) или парсинг строкового
представления.
Ключевые особенности RGB:
При интерполяции в RGB пространстве визуальные переходы могут выглядеть неравномерно: промежуточные цвета часто проходят через мутные или серые оттенки, особенно при смешении насыщенных цветов.
В D3 линейная интерполяция RGB реализуется через
d3.interpolateRgb, где компоненты красного, зелёного и
синего интерполируются независимо.
HSL (Hue, Saturation, Lightness) представляет цилиндрическую модель, ориентированную на более интуитивное управление цветом.
Компоненты:
В D3 цвет HSL создаётся через d3.hsl(h, s, l) и активно
применяется для генерации палитр и управляемых цветовых шкал.
Особенность HSL заключается в отделении яркости от оттенка, что позволяет:
Однако HSL не является перцептивно равномерным пространством. При интерполяции возможны скачки восприятия яркости, особенно при переходах через разные зоны оттенков.
Интерполяция в D3 реализуется через d3.interpolateHsl,
где переход происходит по цилиндрической траектории оттенка и линейно по
насыщенности и светлоте.
HSV (Hue, Saturation, Value) концептуально близка к HSL, но отличается трактовкой яркости. Вместо светлоты используется параметр Value, отражающий максимальную компоненту RGB.
Характерные свойства:
В экосистеме D3 HSV не является основным пространством, однако встречается в пользовательских преобразованиях и сторонних расширениях. Прямой поддержки интерполятора HSV в стандартном наборе D3 нет, что связано с ограниченной перцептивной точностью модели.
CIELAB (Lab) представляет собой цветовое пространство, разработанное для приближения к человеческому восприятию цвета. Оно строится на основе:
В D3 Lab реализуется через d3.lab(l, a, b) и является
ключевым компонентом для визуально корректной интерполяции.
Основное преимущество Lab:
Интерполяция через d3.interpolateLab обеспечивает
визуально гладкие переходы, особенно при построении тепловых карт и
непрерывных шкал данных.
Lab широко используется в аналитических визуализациях, где точность восприятия важнее производственной простоты RGB.
HCL (Hue, Chroma, Luminance) представляет цилиндрическую форму Lab пространства. В D3 это одно из наиболее важных перцептивных пространств для построения шкал.
Компоненты:
HCL создаётся через d3.hcl(h, c, l) и используется для
интерполяции через d3.interpolateHcl.
Ключевые свойства:
HCL особенно эффективен для построения категориальных палитр, где требуется равномерное распределение различимых цветов при фиксированной яркости.
Цветовые пространства в D3 напрямую связаны с механизмом интерполяции, используемым в шкалах и анимациях.
Основные интерполяторы:
d3.interpolateRgb — линейный переход в RGB;d3.interpolateHsl — переход в HSL;d3.interpolateLab — перцептивно равномерный
переход;d3.interpolateHcl — цилиндрическая интерполяция
Lab.Выбор пространства влияет на визуальный результат:
Визуальная интерполяция в D3 строится на концепции непрерывных функций, где цвет рассматривается как точка в многомерном пространстве. Каждое пространство задаёт собственную геометрию траектории перехода.
В рамках шкал D3 (d3-scale) цветовые пространства
используются для преобразования числовых данных в визуальные
представления.
Линейные шкалы часто комбинируются с интерполяторами:
Модуль d3-scale-chromatic использует заранее
подготовленные палитры, многие из которых основаны на Lab и HCL, что
обеспечивает визуальную равномерность при увеличении количества
классов.
Выбор пространства определяется характером визуализации:
RGB:
HSL:
HSV:
Lab:
HCL: