Handling colors

[markov00]

This ticket try to resume the enhancement requests about colors in our charting library.

The main idea is to provide a set of color schemes to be used in our charts depending on the chart use case.

There are two main color scheme types:

Qualitative

Also known as categorical, needs a set of colors that use differences in hue to represent nominal differences, or differences in kind.

Quantitative

can be distinguished into two sub-categories, and can be represented as a continuous scale with an infinite number of colors or discrete scale with a finite number of colors.

• sequential: where the data classes are logically arranged from high to low, and this stepped sequence of categories should be represented by sequential lightness steps. Low data values are usually represented by light colors and high values represented by dark colors.

continuous:

discrete:

• diverging: allow the emphasis of a quantitative data display to be progressions outward from a critical midpoint of the data range.

continuous:

discrete:

Important aspect to consider:

1. the consumer should be aware of these different schemes (not only through documentation but from the code itself)
2. elastic-charts will provide a limited set of good color schemes. EUI will provide its own schemas. The consumer can choose the appropriate schema depending on the use case or let the user decide. By default in Kibana we should use EUI palettes, but we will let the user choose if they want optional choices.
3. each chart can consume the schema in different ways:
   • by default, providing an array of colors. Each color is assigned sequentially to each series defined in the chart spec, looping through the array if it contains less colors that the number of visualized series.
   • providing single color for each data series
   • (to be implemented) specifying a schema configuration that uniquely represent a color schema, elastic-charts will then compute the right parameters depending on the number of series available.
4. each visualization editor should provide the user with the ability to choose between saving the visualization color schema by name or by colors. By name means that if, in the future, that schema is changed (colors are swapped, added or removed) the new set of colors is applied overriding the previous configuration. By colors means that we save the schema configuration and, no matter what changes are applied, a saved visualization will remain the same.
5. A color schema is defined as cyclical in the following cases:

• the color schema is a qualitative/categorical and we want to loop through the available set of colors if the number of colors is less then the number of series to represent. In this case, after the first "loop", we can apply a function to mutate the color by changing one of its property to avoid repeating exactly the same color.
• the color schema is a quantitative and the start color is the same as the end color.

Possible color schema:

interface ColorSchema {
  // start, mid, end, or any number of color steps or the full qualitative colors set
  colors: string[];
  // https:/elastic/elastic-charts/issues/294
  cyclical?: true | 'hue' | 'saturation' | 'lightness' ;
  maxSteps?: number;
  // this is a simple descriptive field
  type: 'quantitative' | 'qualitative';
  // the interpolation applied to the color array. Can be undefined if using a qualitative schema
  interpolation?: 'lab' | 'hsl' | 'hcl' | 'rgb';
  // the type of scale used, by default could be discrete
  scale?: 'discrete' | 'continuous';
}

The possible color schemas are in the form:

const RedSequential: ColorSchema = {
  colors: ["white", "red"],
  type: 'quantitative',
  interpolation: 'lab',
  scale: 'discrete',
}
const DefaultCategorical: ColorSchema = {
  colors: ["red", "green","blue","yellow","pink"],
  cyclical: 'lightness',
  type: 'qualitative'
}

const TemperatureContinuous: ColorSchema = {
  colors: ["green","yellow","red"],
  type: 'quantitative',
  interpolation: 'hcl',
  scale: 'continuous',
}

const CyclicalContinuous: ColorSchema = {
  colors: ["green","yellow","red"],
  cyclical: true,
  maxSteps: 10,
  type: 'quantitative',
  interpolation: 'hcl',
  scale: 'discrete',
}

These can be applied to elastic-charts theme as

<Chart>
  <Settings theme={{colors: { schema: RedSequential } }} />
  ...
</Chart>

Internally, when we are ready to apply a color to a specific series, we can call a set of functions (see #459) to compute the right amount of steps to be used.
We should apply the schema using the following conventions:

• if we have a single series when using a Sequential, 2 color, scale, choose the end color as the default (the end should define the higher value on the scale)
• if using the categorical schema, just apply the one color for each series. If the number of series is higher than the colors, alter the colors using the cyclical configuration when cycling again through the colors array
• if using a quantitative schema, apply the interpolation specificed to the colors, using the scale provided. the cyclical configuration should not be considered, and the number of steps is determined by the number of series. If cyclical is configured and the scale is discrete, than we can assume that we want a cyclical sequential color array, that has maxSteps as the max number of steps on the discrete scale, and than cycle back if the number of series is higher than the maxSteps value.

linked issues:

• Provide some color and spectrum creating functions #293

references:

• Color Use Guidelines for Mapping and Visualization
• d3-scale-chromatic
• d3 scale chromatic observable
• Colors for Data Vis

TODOs

• specify colors as function/rgb/hcl etc
• specify only one color and the rest goes grey or a different color