d3-scale-chromatic

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

Например, чтобы создать категориальную цветовую шкалу, используя цветовую схему 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.v4.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-scale-chromatic в вашем браузере.

Справочник API

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

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], возвращает соответствующий цвет из последовательной цветовой схемы “Purples”, представленной как строка RGB.

d3.interpolateReds(t) Источник
d3.schemeReds[k]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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