d3-cam02 is a beta-release D3 extension that supports CIECAM02-UCS Jab and CIECAM02 JCh color specifications.
d3-cam02 is open sourced here. If you want to take a look at the extension in full, check it out on unpkg.
Known Issuesd3.jch(12,90,90).rgb()).
This behavior is, strangely, consistent with other CIECAM02 to XYZ to
RGB conversion implementations.
If you know why this happens, I'd love to know!
To access the latest version of d3-cam02, grab it on unpkg. Be sure to load d3-cam02 after d3-color is loaded (be it through d3.v4.js, d3-color.js, or otherwise).
If installing and building from scratch, download the repo either through
GitHub or through
npm.
Once you've downloaded it, just run npm install, which will
install the required dependencies.
Note that building requires
node.js and
npm.
D3 module dependencies: d3-color.
CIECAM02 is a color appearence model designed by the International Commision on Illumination to accurately model human color perception [1]. d3-cam02 exposes two color specifications. One is CIECAM02 JCh, which defines color in terms of lightness, chroma, and hue. The second is CIECAM02-UCS Jab, which defines color in terms of human opponent color processing: lightness (J), redness-to-greenness (a), and blueness-to-yellowness (b). The lightness of JCh and Jab are not equivalent given that Jab is put through a lightness transform when defined by JCh color.
Given the variance in display output we assume average viewing conditions when calculating CIECAM02, but include dim and dark transforms in the source code.
While there are always precision concerns when defining color for online audiences, Maureen Stone et al found that display color variance was still small enough to preserve the utility of using CIELAB color online [2]. We make the assumption that this also holds true of CIECAM02 and CIECAM02-UCS color.
Perceptual uniformity is the idea that Euclidean distance between colors in color space should match human color perception distance judgements. For example, a blue and red that are distance d apart should look as discriminable as a green and purple that are distance d apart.
Perceptual uniformity is important for visualization because color distance often encodes meaning, and a visualization's effectiveness is largely derived from its ability to accurately convey underlying data.
Digital color spaces like RGB and CYM are not perceptually uniform, and should therefore not be used when creating visualization color scales or palettes. Instead, designers should utilize spaces that are modeled after human color perception such as CIELAB or CIECAM02-UCS (see below for a comparison).
CIECAM02 is a color appearence model that was designed to better simulate typical human color vision. The goal of such models is to define color space such that linearly changing color specifications like chroma or hue also produces linear changes in human perception of chroma or hue. To achieve this, CIECAM02 defines color by simulating responses of human long, medium, and short cone cells with CIECAT02 [3] and translates those responses into familiar color terms (e.g., hue).
CIECAM02-UCS is a manipulation of CIECAM02 that makes the original space perceptually uniform [4]. To calculate perceptual/color distance, you can use color.de(color), which calculates an adjusted Euclidean distance between the two colors. This distance is commonly referred to as ∆E or DE [5].
Because CIECAM02-UCS is a transform of CIECAM02, lightness (J) is not equivalent between the two spaces.
Perhaps the most common perceptually uniform color space that is currently used by designers is CIELAB color space characterized with CIE Standard Illuminant D65. If you've ever used d3.lab, you've used this color space. So how does CIECAM02-UCS differ from CIELAB? Maybe the best way is to see color interpolation differences:
As evident, even though CAM02-UCS and CIELAB are both perceptually uniform approximations, they define color in different ways. Also note how each compares to RGB, which is not perceptually grounded. You can see the assymetry between CIELAB and CIECAM02-UCS in Li, Cuo, and Luo's plot comparing uniformity results using colors from the Optical Society of America, where more grid-like meshes reflect greater perceptual uniformity:
CIELAB and CIECAM02-UCS comparison reconstructed from Li, Cui, and Luo 2006 [6]. Non-skewed grids reflect perceptual uniformity. Data based on fitting perceptually uniform colors as determined by the Optical Society of America.
So, is it worth using CIECAM02-UCS instead of CIELAB? As with most design decisions, there isn't a definite answer. Although CIECAM02 gives a more uniform approximation, it is unclear what the actual magnitude of difference would be on average for online audiences given the diaspora of displays that an audience could use. But, greater precision never hurts either. Ultimately, by even considering perceptual uniform spaces to begin with you are taking a step in the right direction, regardless of which you select.
Provided free-to-use and open-sourced. See Github for specific licensing information.