Detailed guide about all the various scale's type
This guide assumes that you have read the scale section
The calendar rely on Plot to handle all color scales. Part of this documentation is extracted from their own documentation, see their docs for more advanced usage.
ordinal
Associate each domain value to a specific color.
This type is best used when your dataset have a finite number of different values,
which do not necessarly have a specific ordered, domain do not have to be sorted.
This is also the type you have to use when using a dataset with non-numerical values.
const cal = new CalHeatmap();
cal.paint(
{
scale: {
color: {
domain: [0, 5, 10, 15, 20, 25, 30],
type: 'ordinal',
},
},
data: {
source: '../../fixtures/seattle-weather.csv',
type: 'csv',
x: 'date',
y: d => parseInt(d['temp_max']),
groupY: 'max',
},
date: { start: new Date('2012-01-01') },
range: 1,
itemSelector: '#ex-ordinal',
domain: {
type: 'year',
},
subDomain: { type: 'day', radius: 2, label: (t, v) => v },
},
[[Legend, { width: 500 }]]
);
render(<div id="ex-ordinal"></div>);
Notice in the above example that all data not matching the domain values are ignored.
You can control the colors by passing the option:
- a
scheme - a
range, an array of colors, same size as the domain array
When scheme nor range are specified, it will default to Turbo scheme.
Followed is an example with non-numerical dataset
const cal = new CalHeatmap();
cal.paint(
{
scale: {
color: {
domain: ['Banana', 'Orange', 'Apple', 'Berry'],
type: 'ordinal',
},
},
data: {
source: [
{ t: new Date('2012-01-01'), v: 'Banana' },
{ t: new Date('2012-01-04'), v: 'Orange' },
{ t: new Date('2012-01-12'), v: 'Apple' },
{ t: new Date('2012-01-18'), v: 'Berry' },
],
x: 't',
y: 'v',
groupY: d => d[0],
},
date: { start: new Date('2012-01-01') },
range: 1,
itemSelector: '#ex-ordinal-2',
domain: {
type: 'month',
},
subDomain: {
type: 'xDay',
radius: 2,
width: 35,
height: 35,
label: (t, v) => v,
},
},
[[Legend, { width: 400 }]]
);
render(<div id="ex-ordinal-2"></div>);
categorical
Same as ordinal, but default to tableau10 scheme.
threshold
For a threshold scale, the domain represents n (typically numeric) thresholds which will produce a range of n + 1 output colors; the ith color of the range applies to values that are smaller than the ith element of the domain and larger or equal to the i - 1th element of the domain
Learn more about on the Plot documentation
const cal = new CalHeatmap();
cal.paint(
{
scale: {
color: {
domain: [5, 10, 15, 20, 25, 30],
type: 'threshold',
scheme: 'YlOrRd',
},
},
data: {
source: '../../fixtures/seattle-weather.csv',
type: 'csv',
x: 'date',
y: d => parseInt(d['temp_max']),
groupY: 'max',
},
date: { start: new Date('2012-01-01') },
range: 1,
itemSelector: '#ex-threshold',
domain: {
type: 'year',
},
subDomain: { type: 'day', radius: 2, label: (t, v) => v },
},
[[Legend]]
);
render(<div id="ex-threshold"></div>);
You can control the colors by passing the option:
- a
scheme - a
range, an array of n+1 colors, with n the size of domain
When scheme nor range are specified, it will default to RdYlBu scheme.
quantize
For a quantize scale, the domain will be transformed into approximately n quantized values, where n is an option that defaults to 5.
Learn more about on the Plot documentation
const cal = new CalHeatmap();
cal.paint(
{
scale: {
color: {
domain: [0, 30],
type: 'quantize',
},
},
data: {
source: '../../fixtures/seattle-weather.csv',
type: 'csv',
x: 'date',
y: d => parseInt(d['temp_max']),
groupY: 'max',
},
date: { start: new Date('2012-01-01') },
range: 1,
itemSelector: '#ex-quantize',
domain: {
type: 'year',
},
subDomain: { type: 'day', radius: 2, label: (t, v) => v },
},
[[Legend]]
);
render(<div id="ex-quantize"></div>);
When scheme nor range are specified, it will default to RdYlBu scheme.
quantile
For a quantile scale, the domain represents all input values to the scale, and the n option specifies how many quantiles to compute from the domain; n quantiles will produce n - 1 thresholds, and an output range of n colors
Learn more about on the Plot documentation
const cal = new CalHeatmap();
cal.paint(
{
scale: {
color: {
domain: [0, 30],
type: 'quantile',
},
},
data: {
source: '../../fixtures/seattle-weather.csv',
type: 'csv',
x: 'date',
y: d => parseInt(d['temp_max']),
groupY: 'max',
},
date: { start: new Date('2012-01-01') },
range: 1,
itemSelector: '#ex-quantile',
domain: {
type: 'year',
},
subDomain: { type: 'day', radius: 2, label: (t, v) => v },
},
[[Legend]]
);
render(<div id="ex-quantile"></div>);
When scheme nor range are specified, it will default to RdYlBu scheme.
linear
Create a scale of continuous colors.
const cal = new CalHeatmap();
cal.paint(
{
scale: {
color: {
domain: [0, 30],
type: 'linear',
},
},
data: {
source: '../../fixtures/seattle-weather.csv',
type: 'csv',
x: 'date',
y: d => parseInt(d['temp_max']),
groupY: 'max',
},
date: { start: new Date('2012-01-01') },
range: 1,
itemSelector: '#ex-linear',
domain: {
type: 'year',
},
subDomain: { type: 'day', radius: 2, label: (t, v) => v },
},
[[Legend]]
);
render(<div id="ex-linear"></div>);
You can control the colors by passing the option:
- a
scheme - a
range of 2 or more colors, with an optional interpolate function
When scheme nor range are specified, it will default to Turbo scheme.
There are a few mathematical-oriented variant of the linear type:
pow - power (exponential) transformsqrt - square-root transform (pow transform with exponent = 0.5)log - logarithmic transformsymlog - bi-symmetric logarithmic transform per Webber et al.sequential - equivalent to linearcyclical - equivalent to linear, but defaults to the Rainbow scheme
diverging
Equivalent to linear, but with a pivot; but defaults to the RdBu scheme
all diverging color scales are symmetric around the pivot; set symmetric to false if you want to cover the whole extent on both sides.
All diverging type support additional options:
pivot (default to 0)symmetric (default to false), whether the scale should be symetric around the pivot
Play with the option in the playground to check how these options work.
const cal = new CalHeatmap();
cal.paint(
{
scale: {
color: {
domain: [-20, 20],
type: 'diverging',
scheme: 'BuRd',
pivot: 0,
symmetric: true,
},
},
data: {
source: '../../fixtures/seattle-weather.csv',
type: 'csv',
x: 'date',
y: d => parseInt(d['temp_min']),
groupY: 'min',
},
date: { start: new Date('2012-01-01') },
range: 1,
itemSelector: '#ex-diverging',
domain: {
type: 'year',
},
subDomain: { type: 'day', radius: 2, label: (t, v) => v },
},
[[Legend]]
);
render(<div id="ex-diverging"></div>);
There are also variant of the diverging scale:
diverging-log - like log, but with a pivot that defaults to 1; defaults to the RdBu schemediverging-pow - like pow, but with a pivot; defaults to the RdBu schemediverging-sqrt - like sqrt, but with a pivot; defaults to the RdBu schemediverging-symlog - like symlog, but with a pivot; defaults to the RdBu scheme