d3-scale-chromatic

Этот модуль предоставляет последовательные, разделяющие и категориальные цветовые схемы, предназначенные для работы с d3-scale’s d3.scaleOrdinal и d3.scaleSequential. Большинство этих схем получены из цветовых схем Синтии А. Брюэр ColorBrewer. Поскольку ColorBrewer публикует только дискретные цветовые схемы, последовательные и разделяющие шкалы интерполируются с использованием унифицированных B-сплайнов.

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

var accent = d3.scaleOrdinal(d3.schemeAccent);

Чтобы создать последовательную дискретную цветовую шкалу из девяти цветов, используя цветовую схему Blues:

var blues = d3.scaleOrdinal(d3.schemeBlues[9]);

Чтобы создать разделяющую, непрерывную цветовую шкалу, используя цветовую схему PiYG:

var piyg = d3.scaleSequential(d3.interpolatePiYG);

Установка

Если вы используете npm, npm install d3-scale-chromatic. Вы также можете загрузить последнюю версию на GitHub. Для обычного HTML в современных браузерах импортируйте d3-scale-chromatic из Skypack:

<script type="module">

import {interpolateYlGn} from "https://cdn.skypack.dev/d3-scale-chromatic@3";

const yellow = interpolateYlGn(0); // "rgb(255, 255, 229)"
const yellowGreen = interpolateYlGn(0.5); // "rgb(120, 197, 120)"
const green = interpolateYlGn(1); // "rgb(0, 69, 41)"

</script>

Для устаревших сред вы можете загрузить UMD-сборку d3-scale-chromatic с npm-базированного CDN, например, jsDelivr; экспортируется глобальная переменная d3:

<script src="https://cdn.jsdelivr.net/npm/d3-color@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-interpolate@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-scale-chromatic@3"></script>
<script>

const yellow = d3.interpolateYlGn(0); // "rgb(255, 255, 229)"
const yellowGreen = d3.interpolateYlGn(0.5); // "rgb(120, 197, 120)"
const green = d3.interpolateYlGn(1); // "rgb(0, 69, 41)"

</script>

Попробуйте d3-scale-chromatic в вашем браузере.

Справочник по API

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

d3.schemeCategory10 Source

Массив из десяти категориальных цветов, представленных в виде шестнадцатеричных строк RGB.

d3.schemeAccent Source

Массив из восьми категориальных цветов, представленных в виде шестнадцатеричных строк RGB.

d3.schemeDark2 Source

Массив из восьми категориальных цветов, представленных в виде шестнадцатеричных строк RGB.

d3.schemePaired Source

Массив из двенадцати категориальных цветов, представленных в виде шестнадцатеричных строк RGB.

d3.schemePastel1 Source

Массив из девяти категориальных цветов, представленных в виде шестнадцатеричных строк RGB.

d3.schemePastel2 Source

Массив из восьми категориальных цветов, представленных в виде шестнадцатеричных строк RGB.

d3.schemeSet1 Source

Массив из девяти категориальных цветов, представленных в виде шестнадцатеричных строк RGB.

d3.schemeSet2 Source

Массив из восьми категориальных цветов, представленных в виде шестнадцатеричных строк RGB.

d3.schemeSet3 Source

Массив из двенадцати категориальных цветов, представленных в виде шестнадцатеричных строк RGB.

d3.schemeTableau10 Source

Массив из десяти категориальных цветов, разработанных Tableau в рамках Tableau 10, представленных в виде шестнадцатеричных строк RGB.

Разделяющие

Разделяющие цветовые схемы доступны в виде непрерывных интерполяторов (часто используемых с d3.scaleSequential) и в виде дискретных схем (часто используемых с d3.scaleOrdinal). Каждая дискретная схема, такая как d3.schemeBrBG, представлена в виде массива массивов шестнадцатеричных цветовых строк. k-й элемент этого массива содержит цветовую схему размера k; например, d3.schemeBrBG[9] содержит массив из девяти строк, представляющих девять цветов разделяющей цветовой схемы коричнево-сине-зеленого цвета. Разделяющие цветовые схемы поддерживают размер k от 3 до 11.

d3.interpolateBrBG(t) Source
d3.schemeBrBG[k]

Принимая число t в диапазоне [0,1], возвращает соответствующий цвет из разделяющей цветовой схемы «BrBG», представленный строкой RGB.

d3.interpolatePRGn(t) Source
d3.schemePRGn[k]

Принимая число t в диапазоне [0,1], возвращает соответствующий цвет из разделяющей цветовой схемы «PRGn», представленный строкой RGB.

d3.interpolatePiYG(t) Source
d3.schemePiYG[k]

Принимая число t в диапазоне [0,1], возвращает соответствующий цвет из разделяющей цветовой схемы «PiYG», представленный строкой RGB.

d3.interpolatePuOr(t) Source
d3.schemePuOr[k]

Принимая число t в диапазоне [0,1], возвращает соответствующий цвет из разделяющей цветовой схемы «PuOr», представленный строкой RGB.

d3.interpolateRdBu(t) Source
d3.schemeRdBu[k]

Принимая число t в диапазоне [0,1], возвращает соответствующий цвет из разделяющей цветовой схемы «RdBu», представленный строкой RGB.

d3.interpolateRdGy(t) Source
d3.schemeRdGy[k]

Принимая число t в диапазоне [0,1], возвращает соответствующий цвет из разделяющей цветовой схемы «RdGy», представленный строкой RGB.

d3.interpolateRdYlBu(t) Source
d3.schemeRdYlBu[k]

Принимая число t в диапазоне [0,1], возвращает соответствующий цвет из разделяющей цветовой схемы «RdYlBu», представленный строкой RGB.

d3.interpolateRdYlGn(t) Source
d3.schemeRdYlGn[k]

Принимая число t в диапазоне [0,1], возвращает соответствующий цвет из разделяющей цветовой схемы «RdYlGn», представленный строкой RGB.

d3.interpolateSpectral(t) Source
d3.schemeSpectral[k]

Принимая число t в диапазоне [0,1], возвращает соответствующий цвет из разделяющей цветовой схемы «Spectral», представленный строкой RGB.

Последовательные (единый оттенок)

Последовательные цветовые схемы с единым оттенком доступны в виде непрерывных интерполяторов (часто используемых с d3.scaleSequential) и в виде дискретных схем (часто используемых с d3.scaleOrdinal). Каждая дискретная схема, такая как d3.schemeBlues, представлена в виде массива массивов шестнадцатеричных цветовых строк. k-й элемент этого массива содержит цветовую схему размера k; например, d3.schemeBlues[9] содержит массив из девяти строк, представляющих девять цветов последовательной синей цветовой схемы. Последовательные цветовые схемы с единым оттенком поддерживают размер k от 3 до 9.

d3.interpolateBlues(t) Source
d3.schemeBlues[k]

Принимая число t в диапазоне [0,1], возвращает соответствующий цвет из последовательной цветовой схемы «Blues», представленный строкой RGB.

d3.interpolateGreens(t) Source
d3.schemeGreens[k]

Принимая число t в диапазоне [0,1], возвращает соответствующий цвет из последовательной цветовой схемы «Greens», представленный строкой RGB.

d3.interpolateGreys(t) Source
d3.schemeGreys[k]

При заданном числе t в диапазоне [0,1], возвращает соответствующий цвет из последовательной цветовой схемы «Серые» в виде строки RGB.

d3.interpolateOranges(t) Source
d3.schemeOranges[k]

При заданном числе t в диапазоне [0,1], возвращает соответствующий цвет из последовательной цветовой схемы «Оранжевые» в виде строки RGB.

d3.interpolatePurples(t) Source
d3.schemePurples[k]

При заданном числе t в диапазоне [0,1], возвращает соответствующий цвет из последовательной цветовой схемы «Фиолетовые» в виде строки RGB.

d3.interpolateReds(t) Source
d3.schemeReds[k]

При заданном числе t в диапазоне [0,1], возвращает соответствующий цвет из последовательной цветовой схемы «Красные» в виде строки RGB.

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

Последовательные многоцветные цветовые схемы доступны в виде непрерывных интерполяторов (часто используются с d3.scaleSequential) и в виде дискретных схем (часто используются с d3.scaleOrdinal). Каждая дискретная схема, такая как d3.schemeBuGn, представлена как массив массивов шестнадцатеричных строк цветов. k-й элемент этого массива содержит цветовую схему размера k; например, d3.schemeBuGn[9] содержит массив из девяти строк, представляющих девять цветов последовательной цветовой схемы сине-зеленого цвета. Последовательные многоцветные цветовые схемы поддерживают размер k от 3 до 9.

d3.interpolateTurbo(t) Source

При заданном числе t в диапазоне [0,1], возвращает соответствующий цвет из цветовой схемы «турбо» от Антона Михайлова.

d3.interpolateViridis(t) Source

При заданном числе t в диапазоне [0,1], возвращает соответствующий цвет из восприятие-равномерной цветовой схемы «виридис», разработанной ван дер Валтом, Смитом и Файрингом для matplotlib, представленный в формате RGB.

d3.interpolateInferno(t) Source

При заданном числе t в диапазоне [0,1], возвращает соответствующий цвет из восприятие-равномерной цветовой схемы «инферно», разработанной ван дер Валтом и Смитом для matplotlib, представленный в формате RGB.

d3.interpolateMagma(t) Source

При заданном числе t в диапазоне [0,1], возвращает соответствующий цвет из восприятие-равномерной цветовой схемы «магма», разработанной ван дер Валтом и Смитом для matplotlib, представленный в формате RGB.

d3.interpolatePlasma(t) Source

При заданном числе t в диапазоне [0,1], возвращает соответствующий цвет из восприятие-равномерной цветовой схемы «плазма», разработанной ван дер Валтом и Смитом для matplotlib, представленный в формате RGB.

d3.interpolateCividis(t) Source

При заданном числе t в диапазоне [0,1], возвращает соответствующий цвет из цветовой схемы «cividis», оптимизированной для дефицита цветового зрения, разработанной Нуньесом, Андертоном и Ренслоу, представленный в формате RGB.

d3.interpolateWarm(t) Source

При заданном числе t в диапазоне [0,1], возвращает соответствующий цвет из 180° поворота воспринимаемой радуги Никколи, представленный в формате RGB.

d3.interpolateCool(t) Source

При заданном числе t в диапазоне [0,1], возвращает соответствующий цвет из воспринимаемой радуги Никколи, представленный в формате RGB.

d3.interpolateCubehelixDefault(t) Source

При заданном числе t в диапазоне [0,1], возвращает соответствующий цвет из по умолчанию Кубихелик Грина, представленный в формате RGB.

d3.interpolateBuGn(t) Source
d3.schemeBuGn[k]

При заданном числе t в диапазоне [0,1], возвращает соответствующий цвет из последовательной цветовой схемы «BuGn» в виде строки RGB.

d3.interpolateBuPu(t) Source
d3.schemeBuPu[k]

При заданном числе t в диапазоне [0,1], возвращает соответствующий цвет из последовательной цветовой схемы «BuPu» в виде строки RGB.

d3.interpolateGnBu(t) Source
d3.schemeGnBu[k]

При заданном числе t в диапазоне [0,1], возвращает соответствующий цвет из последовательной цветовой схемы «GnBu» в виде строки RGB.

d3.interpolateOrRd(t) Source
d3.schemeOrRd[k]

При заданном числе t в диапазоне [0,1], возвращает соответствующий цвет из последовательной цветовой схемы «OrRd» в виде строки RGB.

d3.interpolatePuBuGn(t) Source
d3.schemePuBuGn[k]

При заданном числе t в диапазоне [0,1], возвращает соответствующий цвет из последовательной цветовой схемы «PuBuGn» в виде строки RGB.

d3.interpolatePuBu(t) Source
d3.schemePuBu[k]

При заданном числе t в диапазоне [0,1], возвращает соответствующий цвет из последовательной цветовой схемы «PuBu» в виде строки RGB.

d3.interpolatePuRd(t) Source
d3.schemePuRd[k]

При заданном числе t в диапазоне [0,1], возвращает соответствующий цвет из последовательной цветовой схемы «PuRd» в виде строки RGB.

d3.interpolateRdPu(t) Source
d3.schemeRdPu[k]

При заданном числе t в диапазоне [0,1], возвращает соответствующий цвет из последовательной цветовой схемы «RdPu» в виде строки RGB.

d3.interpolateYlGnBu(t) Source
d3.schemeYlGnBu[k]

При заданном числе t в диапазоне [0,1], возвращает соответствующий цвет из последовательной цветовой схемы «YlGnBu» в виде строки RGB.

d3.interpolateYlGn(t) Source
d3.schemeYlGn[k]

При заданном числе t в диапазоне [0,1], возвращает соответствующий цвет из последовательной цветовой схемы «YlGn», представленный в виде строки RGB.

d3.interpolateYlOrBr(t) Source
d3.schemeYlOrBr[k]

При заданном числе t в диапазоне [0,1], возвращает соответствующий цвет из последовательной цветовой схемы «YlOrBr», представленный в виде строки RGB.

d3.interpolateYlOrRd(t) Source
d3.schemeYlOrRd[k]

При заданном числе t в диапазоне [0,1], возвращает соответствующий цвет из последовательной цветовой схемы «YlOrRd», представленный в виде строки RGB.

Циклические

d3.interpolateRainbow(t) Source

При заданном числе t в диапазоне [0,1], возвращает соответствующий цвет из цветовой схемы «дуга», которая использует шкалу d3.interpolateWarm в диапазоне [0.0, 0.5] и далее шкалу d3.interpolateCool в диапазоне [0.5, 1.0], реализуя таким образом циклическую цветовую схему «менее сердистая радуга» .

d3.interpolateSinebow(t) Source

При заданном числе t в диапазоне [0,1], возвращает соответствующий цвет из цветовой схемы «sinebow» разработанной Джимом Бумгарднером и Чарли Лойдом.