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.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.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.v5.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.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], возвращает соответствующий цвет из последовательной цветовой схемы «Oranges», представленный в виде строки RGB.

d3.interpolatePurples(t) Исходный код
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.interpolateViridis(t) Source

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

d3.interpolateInferno(t) Source

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

d3.interpolateMagma(t) Source

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

d3.interpolatePlasma(t) Source

Принимая число t в диапазоне [0,1], возвращает соответствующий цвет из перцептуально-равномерной цветовой схемы «plasma», разработанной van der Walt и Smith для matplotlib, в виде строки 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) Source

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