LAB Color Space
The example visualizes the LAB color space by rendering a grid of colored rectangles with fixed lightness (L=50) and varying A and B components along the X and Y axes, producing a perceptually uniform color field. A black circle marks the boundary of the selected A/B radius, and small circles show colors chosen at evenly spaced angles along that circle. The code uses D3.js (version 3.5) and lodash to generate the grid, while a custom `generateColors` function picks distinct colors for 1 to 20 categories, cycling through them every second via `setInterval`. The background fills use `d3.lab`, and the small circles are updated with enter/exit selections.
AI-generated descriptionAn experiment in automatically picking N distinct colors for visualizing N distinct categories.
The LAB Color Space was designed with perception in mind. This program has a background that has a fixed L (lightness), and varies the A and B opposing color components along X and Y.
LAB is supposed to be perceptually uniform, meaning that distances in LAB space should correspond to perceptual distances. The idea with this experiment is that in order to pick a set of colors that are distinct and perceptually equidistant, we can pick colors that are equidistant in LAB space. A simple approach to doing this is to select colors along a circle in (A, B) space with a fixed L. This is what the program is doing, varying the number of colors from 1 to 20.
If you want to try this out in your visualizations, copy and paste the generateColors function.