Последовательные, расходящиеся и качественные палитры

В визуализации данных цветовые шкалы выполняют роль интерпретирующего слоя между числовыми или категориальными значениями и их визуальным представлением. В D3.js цветовая система построена на сочетании интерполяций, дискретных схем и предопределённых палитр, реализованных через модули d3-scale и d3-scale-chromatic.

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

В D3 такие палитры часто строятся через непрерывные интерполяторы:

  • d3.interpolateBlues
  • d3.interpolateViridis
  • d3.interpolateInferno
  • d3.interpolatePlasma

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

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

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

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

console.log(color(0));   // начало шкалы
console.log(color(50));  // середина
console.log(color(100)); // конец

Важным аспектом является восприятие равномерности: человеческий глаз не линейно воспринимает яркость, поэтому современные палитры (например, Viridis) оптимизированы с учётом перцептивной равномерности.

Расходящиеся палитры

Расходящиеся (diverging) палитры используются для данных, где существует центральная нейтральная точка, а отклонения от неё в обе стороны имеют разную семантику. Это характерно для:

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

В D3.js такие палитры реализуются через функции вида d3.interpolateRdBu, d3.interpolatePiYG, d3.interpolateBrBG.

Структура расходящейся шкалы обычно включает три зоны:

  • отрицательные значения (один цветовой спектр)
  • нейтральная точка (часто белый или серый)
  • положительные значения (контрастный спектр)

Пример:

import { scaleDiverging } from "d3-scale";
import { interpolateRdBu } from "d3-scale-chromatic";

const color = scaleDiverging(interpolateRdBu)
  .domain([-10, 0, 10]);

color(-10); // крайнее отрицательное
color(0);   // нейтральное значение
color(10);  // крайнее положительное

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

Качественные палитры

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

В D3 используются схемы:

  • schemeCategory10
  • schemeTableau10
  • schemeSet3
  • schemePaired

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

Пример использования:

import { scaleOrdinal } from "d3-scale";
import { schemeTableau10 } from "d3-scale-chromatic";

const color = scaleOrdinal(schemeTableau10);

color("A");
color("B");
color("C");

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

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

Комбинирование шкал и интерполяций

Внутренняя архитектура цветовых шкал в D3.js основана на разделении логики масштабирования и цветовой интерполяции. Это позволяет гибко комбинировать:

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

Пример расширенной конфигурации:

import { scaleSequentialLog } from "d3-scale";
import { interpolateMagma } from "d3-scale-chromatic";

const color = scaleSequentialLog(interpolateMagma)
  .domain([1, 1000]);

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

Встроенные схемы и модуль d3-scale-chromatic

Модуль d3-scale-chromatic содержит стандартизированные палитры, разделённые на три основных семейства:

  • sequential
  • diverging
  • categorical

Каждая схема представлена в нескольких вариантах интенсивности и длины (например, schemeBlues[9] или schemeBlues[3]), что позволяет адаптировать визуализацию под плотность данных.

Пример дискретной последовательной схемы:

import { scaleOrdinal } from "d3-scale";
import { schemeBlues } from "d3-scale-chromatic";

const color = scaleOrdinal(schemeBlues[9]);

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

Перцептивные аспекты цветовых шкал

Цветовые шкалы в визуализации должны учитывать особенности восприятия:

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

Современные палитры, включённые в D3, проектируются с учётом исследований перцептивной равномерности. Например, Viridis обеспечивает равномерное изменение яркости при переходе по шкале, что снижает искажения при интерпретации данных.

Настраиваемые палитры и кастомизация

Помимо встроенных схем, D3 позволяет создавать пользовательские палитры через интерполяционные функции:

import { interpolateRgb } from "d3-interpolate";
import { scaleSequential } from "d3-scale";

const custom = scaleSequential(
  interpolateRgb("blue", "orange")
).domain([0, 1]);

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

Расширенная кастомизация включает:

  • изменение цветового пространства (RGB, HSL, Lab)
  • использование многоступенчатых градиентов
  • нелинейные интерполяции

Применение в сложных визуализациях

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

  • размер маркера
  • прозрачность
  • форма элементов

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

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

Оглавление