Categorical color scale generator (HCL)

A generator of categorical color scales (a differentiated palette of colors to distinguish representations of categorical variables), using the HCL color space. Change the number of colors by interacting with the inner circle, or rotate the wheel to change the offset.

Choosing a palette like this is useful to avoid the unintended highlighting of a category, at the expense of another.

The generated scales have all the same values for the chroma (40) and the luminance (70) components, giving a set of colors that differ only in hue. Colors in a set like this are perceived as having the same brightness, while colors that are equidistant in, for example, the HSL color space, can be seen as more bright (e.g. yellow) or less bright (e.g. blue). See also this example by Mike Bostock, containing links to more detailed explanations.

The values for the hue component are selected by a uniform sampling from 0 to 360, rotated by an offset that can be controlled by interacting with the wheel.

The wheel is implemented using the D3 svg arc generator in combination with the D3 implementation of HCL.

The code that handles the interactive rotation makes use of D3's drag behavior and some trigonometry, involving the use of Javascript's atan2 function.

forked from nitaku's block: Categorical color scale generator (HCL)