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

Цветовые схемы — именованные палитры для дискретного и непрерывного кодирования цветом. Vega включает набор схем, разработанных с учётом особенностей восприятия. Многие из них созданы Синтией Брюэр в проекте ColorBrewer или Морин Стоун из Tableau Software. Просмотр и настройка схем по умолчанию описаны в разделе конфигурации.

Дискретные схемы можно напрямую использовать со шкалами, у которых область определения дискретна или преобразуется в дискретную: ordinal, quantize и quantile. Непрерывные схемы подходят для непрерывных шкал, например linear, log и sqrt. Если задать свойство схемы count, на их основе можно получить дискретную палитру.

Свойства схемы

Ниже перечислены свойства определения цветовой схемы. Такой объект можно указать в свойстве шкалы range. Если в определении шкалы задано "reverse": true, порядок цветов схемы меняется на обратный.

Свойство Тип Описание
scheme String | Color[ ] Обязательно. Имя цветовой схемы или массив значений цвета. Именованные схемы перечислены в справочнике ниже. Начиная с Vega 5.0, цвета переданного массива интерполируются для создания новой схемы; тип интерполяции задаётся свойством шкалы interpolate. По умолчанию применяется линейная интерполяция RGB.
count Number Число цветов схемы. Полезно для шкал quantile и quantize, которые определяют число дискретных интервалов области по длине диапазона шкалы. Для шкалы ordinal с непрерывной схемой по умолчанию используется число элементов области определения; если она пуста, например ещё не задана сигналом, берётся пять цветов.
extent Number[ ] Только для непрерывных схем: используемая часть цветового диапазона. Например, [0.2, 1] исключает цвета интервала [0, 0.2). Если первым поставить большее число, порядок схемы изменится на обратный: [1, 0] — обратный вариант [0, 1].

Регистрация дополнительных схем

Дополнительные цветовые схемы регистрируются методом vega.scheme. Новая схема должна быть допустимым массивом цветов или функцией-интерполятором. Например:

// Зарегистрировать дискретную схему "basic" для спецификаций Vega
vega.scheme('basic', ['#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff']);
// Зарегистрировать собственную непрерывную схему

// Функция-интерполятор сопоставляет значениям [0,1] цвета
function grey(f) {
  var g = Math.max(0, Math.min(255, Math.round(255 * f))) + '';
  return 'rgb(' + g + ', ' + g + ', ' + g + ')';
}

// Зарегистрировать интерполятор под именем "mygrey"
vega.scheme("mygrey", grey);

Справочник схем

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

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

# accent
# category10
# category20
# category20b
# category20c
#observable10
# dark2
# paired
# pastel1
# pastel2
# set1
# set2
# set3
# tableau10
# tableau20

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

Последовательные схемы используют для кодирования количественных значений. Цветовой градиент отражает возрастание чисел. Наведите курсор на схему и нажмите «Показать дискретную палитру», чтобы увидеть цвета для шкал quantile, quantize, threshold или ordinal.

# tealblues ≥ 5.0 Показать дискретную палитру
# teals ≥ 5.0 Показать дискретную палитру
# browns ≥ 5.0 Показать дискретную палитру
# warmgreys ≥ 5.0 Показать дискретную палитру

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

Последовательные схемы используют для кодирования количественных значений. Здесь возрастание чисел показано несколькими оттенками, что помогает различать цвета, например на тепловых картах. Но из-за смены оттенка зритель может ошибочно воспринимать непрерывный диапазон как группы. Наведите курсор на схему и нажмите «Показать дискретную палитру», чтобы увидеть цвета для шкал quantile, quantize, threshold или ordinal.

# cividis ≥ 5.15 Показать дискретную палитру
# turbo ≥ 5.15 Показать дискретную палитру
# goldgreen ≥ 5.0 Показать дискретную палитру
# goldorange ≥ 5.0 Показать дискретную палитру
# goldred ≥ 5.0 Показать дискретную палитру
# purplebluegreen Показать дискретную палитру
# yellowgreenblue Показать дискретную палитру
# yelloworangebrown Показать дискретную палитру
# yelloworangered Показать дискретную палитру

Для тёмного фона

# darkblue ≥ 5.0 Показать дискретную палитру
# darkgold ≥ 5.0 Показать дискретную палитру
# darkgreen ≥ 5.0 Показать дискретную палитру
# darkmulti ≥ 5.0 Показать дискретную палитру
# darkred ≥ 5.0 Показать дискретную палитру

Для светлого фона

# lightgreyred ≥ 5.0 Показать дискретную палитру
# lightgreyteal ≥ 5.0 Показать дискретную палитру
# lightmulti ≥ 5.0 Показать дискретную палитру
# lightorange ≥ 5.0 Показать дискретную палитру
# lighttealblue ≥ 5.0 Показать дискретную палитру

Расходящиеся схемы

Расходящиеся схемы подходят для количественных значений со значимой серединой, например нулём или средним. Цвета разных оттенков расходятся от средней точки, а насыщенность возрастает, выделяя значения по обе стороны от неё. Наведите курсор на схему и нажмите «Показать дискретную палитру», чтобы увидеть цвета для шкал quantile, quantize, threshold или ordinal.

# brownbluegreen Показать дискретную палитру
# pinkyellowgreen Показать дискретную палитру
# redyellowgreen Показать дискретную палитру

Циклические схемы

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

# rainbow ≥ 4.0
# sinebow ≥ 4.0