This demo is built using the cubehelix npm package which implements Dave Green's cubehelix algorithm.
The motivation for the cubehelix algorithm is the following: assume you are given a 2D matrix of numerical values. E.g. each coordinate of the matrix holds a single scalar (one-dimensional) numeric value (float or integer). Such matrixes are common in astronomy but can also be used to represent, e.g. the salinity of the ocean (at the surface), or the average rainfall over an area. Suppose then that you are further asked to prepare a visualization for the contents of said matrix. The simplest approach would be to linearly map the range [min, max] of values to some gray-scale. E.g. map the lowest value to black, the highest to white and linearly interpolate all intermediate values.
But what if you wanted to produce a visualization using color? All color spaces are inherently three-dimensional (e.g. RGB is a cube, HSL is a cylinder and so on). How to map one dimensional values to three dimensions?
The problem is to devise an appropriate arrangement of a path in the 3D RGB space such that:
This is further complicated by the fact that the brightness perceived by the human eye does not assign equal weight to the three dimensions of the RGB space (bright green appears much more luminous than bright blue).
The cubehelix algorithm generates such a function, actually a family of such mapping functions, that map intensity values in the [0, 1] range to a wide variety of color in the RGB space such that as a variable x proceeds from 0 to 1, the perceived brightness of the color to which that value x is mapped monotonically increases. It does so by arranging a tapered helix in the 3D RGB space.
The paper defining the cubehelix algorithm is available here. The algorithm is also discussed here. A more general discussion on the topic of colormaps is available here.
Four parameters (start, rotations, hue and gamma) control the exact shape of the helix. Modifying these parameters gives rise to a number of different mapping functions that all exhibit the crucial monotonically increasing luminance property.
In the diagram below the horizontal axis stands for variable x described above. Variable x takes values in the [0, 1] range. That value is then mapped to a color in the RGB space according to the cubehelix algorithm. As mentioned, the cubehelix algorithm is capable of generating a family of such mapping functions according to four configuration parameters (see below) that control the shape of the helix.
The R, G and B components of the color (to which variable x is mapped) are represented by the red, green, and blue lines in the plot below.
The solid black line that runs diagonally across the plot is the brightness perceived by the human eye. You will notice that for certain helix configuration parameters, the R, G or B values fall outside of the [0, 1] range. When this happens to an obscene degree, the monotonicity of the perceived brightness function (the black line in the plot) may suffer a little. In particular, the hue and the gamma configuration parameters are the two that can more easily disrupt the shape of the perceived brightness function.