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. В противном случае, загрузите последнюю версию или загрузите напрямую с d3js.org как автономную библиотеку. Поддерживаются среды AMD, CommonJS и vanilla. В vanilla, экспортируется глобальная переменная d3:

<script src="https://d3js.org/d3-color.v2.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v2.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v2.min.js"></script>
<script>

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

</script>

Или, как часть основного набора D3:

<script src="https://d3js.org/d3.v6.min.js"></script>
<script>

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

</script>

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

Справочник API

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

d3.schemeCategory10 Исходный код

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

d3.schemeAccent Исходный код

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

d3.schemeDark2 Исходный код

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

d3.schemePaired Исходный код

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

d3.schemePastel1 Исходный код

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

d3.schemePastel2 Исходный код

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

d3.schemeSet1 Исходный код

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

d3.schemeSet2 Исходный код

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

d3.schemeSet3 Исходный код

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

d3.schemeTableau10 Исходный код

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

Разделяющие

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

d3.interpolateBrBG(t) Исходный код
d3.schemeBrBG[k]

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

d3.interpolatePRGn(t) Исходный код
d3.schemePRGn[k]

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

d3.interpolatePiYG(t) Исходный код
d3.schemePiYG[k]

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

d3.interpolatePuOr(t) Исходный код
d3.schemePuOr[k]

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

d3.interpolateRdBu(t) Исходный код
d3.schemeRdBu[k]

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

d3.interpolateRdGy(t) Исходный код
d3.schemeRdGy[k]

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

d3.interpolateRdYlBu(t) Исходный код
d3.schemeRdYlBu[k]

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

d3.interpolateRdYlGn(t) Исходный код
d3.schemeRdYlGn[k]

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

d3.interpolateSpectral(t) Исходный код
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) Исходный код
d3.schemeBlues[k]

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

d3.interpolateGreens(t) Исходный код
d3.schemeGreens[k]

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

d3.interpolateGreys(t) Исходный код
d3.schemeGreys[k]

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

d3.interpolateOranges(t) Исходный код
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] возвращает соответствующий цвет из цветовой схемы «turbo» от Anton Mikhailov.

d3.interpolateViridis(t) Source

При заданном числе t в диапазоне [0,1] возвращает соответствующий цвет из перцептуально-равномерной цветовой схемы «viridis», разработанной van der Walt, Smith and Firing для matplotlib, представленной в формате RGB-строки.

d3.interpolateInferno(t) Source

При заданном числе t в диапазоне [0,1] возвращает соответствующий цвет из перцептуально-равномерной цветовой схемы «inferno», разработанной van der Walt and Smith для matplotlib, представленной в формате RGB-строки.

d3.interpolateMagma(t) Source

При заданном числе t в диапазоне [0,1] возвращает соответствующий цвет из перцептуально-равномерной цветовой схемы «magma», разработанной van der Walt and Smith для matplotlib, представленной в формате RGB-строки.

d3.interpolatePlasma(t) Source

При заданном числе t в диапазоне [0,1] возвращает соответствующий цвет из перцептуально-равномерной цветовой схемы «plasma», разработанной van der Walt and Smith для matplotlib, представленной в формате RGB-строки.

d3.interpolateCividis(t) Source

При заданном числе t в диапазоне [0,1] возвращает соответствующий цвет из цветовой схемы «cividis», оптимизированной для цветовой слепоты, разработанной Nuñez, Anderton, and Renslow, представленной в формате 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] возвращает соответствующий цвет из стандартной схемы Cubehelix, представленной в формате 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) Исходный код

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