Цветовые схемы D3: d3-scale-chromatic

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

Цветовые схемы в D3 разделяются на несколько крупных семейств, каждое из которых соответствует определённому типу данных:

  • категориальные (discrete)
  • последовательные (sequential)
  • дивергентные (diverging)
  • интерполяционные функции (interpolators)

Модуль d3-scale-chromatic не создаёт шкалы напрямую, а предоставляет набор готовых палитр и функций интерполяции, которые используются совместно с d3-scale.

Ключевая идея заключается в разделении ответственности:

  • d3-scale определяет соответствие данных и диапазона
  • d3-scale-chromatic определяет визуальную структуру цвета

Категориальные цветовые схемы

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

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

  • schemeCategory10
  • schemeCategory20
  • schemeTableau10
  • schemeSet3

Каждая схема представляет собой массив HEX-цветов.

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

import * as d3 from "d3";
import { schemeCategory10 } from "d3-scale-chromatic";

const color = d3.scaleOrdinal()
  .domain(["A", "B", "C", "D"])
  .range(schemeCategory10);

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

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

Последовательные цветовые схемы

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

Основные наборы:

  • schemeBlues
  • schemeGreens
  • schemeGreys
  • schemeOranges
  • schemePurples

Они строятся так, чтобы светлота или насыщенность изменялась монотонно.

Пример:

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

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

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

Дивергентные цветовые схемы

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

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

  • schemeRdBu
  • schemeRdYlBu
  • schemePiYG
  • schemePRGn

Структура таких схем симметрична относительно центральной точки:

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

Пример:

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

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

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

Интерполяционные функции цвета

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

Основные интерполяции:

  • interpolateRgb
  • interpolateHsl
  • interpolateHcl
  • interpolateLab
  • interpolateCubehelix

RGB-интерполяция

import { interpolateRgb } from "d3-scale-chromatic";

const i = interpolateRgb("#ff0000", "#0000ff");
i(0.5);

RGB-интерполяция проста, но не всегда визуально равномерна.

LAB и HCL пространства

Интерполяции Lab и HCL основаны на восприятии цвета человеком. Они обеспечивают более равномерные переходы яркости и насыщенности.

import { interpolateHcl } from "d3-scale-chromatic";

const i = interpolateHcl("steelblue", "orange");

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

Связь с цветовыми шкалами

Цветовые схемы напрямую интегрируются в шкалы D3:

Ordinal шкалы

Используются для категорий:

d3.scaleOrdinal()
  .domain(dataCategories)
  .range(schemeSet3);

Sequential шкалы

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

d3.scaleSequential(interpolateViridis)
  .domain([0, 1000]);

Diverging шкалы

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

d3.scaleDiverging(interpolateSpectral)
  .domain([-100, 0, 100]);

Семейство perceptually uniform схем

Особое место занимают схемы, основанные на равномерности восприятия:

  • interpolateViridis
  • interpolateInferno
  • interpolateMagma
  • interpolatePlasma

Эти схемы оптимизированы для корректного восприятия при печати и на экранах с разной калибровкой.

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

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

Их характерная особенность — отсутствие резких скачков яркости и улучшенная читаемость для дальтонических режимов.

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

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

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

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

Особенности внутренней реализации

Модуль d3-scale-chromatic не хранит фиксированные визуальные стили, а предоставляет вычисляемые функции и массивы цветов, основанные на научных моделях восприятия цвета.

Ключевые принципы:

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

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

Оглавление