Rainbow Perceptual Distance

100%

Rainbow Perceptual Distance

✓ Published0🌍 Public

Last edited Apr 6, 2016

Created on Apr 11, 2018

This chart compares the perceptual uniformity of three rainbow color scales—HSL, HCL, and Cubehelix—by plotting the CIE76 color difference between points 10° apart along each scale. The flatness of each curve indicates uniformity, with HCL perfectly flat by definition and Cubehelix more uniform than HSL. Built with D3 v4, the visualization uses `d3.line` with basis curves, a linear x-scale over 0–360 degrees, and a category10 color scheme for the series. Each data point is computed via `d3.lab` and a custom delta function, with labels positioned along the paths using `textPath`.

AI-generated description

This attempts to measure the perceptual uniformity of three rainbow color scales by computing the CIE76 color difference at various points along the scale. The flatness of the curve, not its absolute value, shows the uniformity of each scale. The HCL rainbow is perfectly flat by definition. Cubehelix is better than HSL, but is not uniform.

It would be better to use CIEDE2000 to compute the difference, but I’m lazy.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Rainbow Perceptual Distance

Three rainbow color scales—HSL, HCL, and Cubehelix—are compared by graphing the CIE76 perceptual color difference between pairs of hues spaced 20 degrees apart. The chart plots these differences along a 360-degree hue axis, with flatter curves indicating more uniform perceptual spacing. The HCL scale is perfectly flat by definition, while Cubehelix outperforms HSL but remains uneven. Using D3 v4, the visualization renders SVG lines and labels via `d3.line`, `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleRainbow`, computing differences with `d3.lab` and a custom `delta` function.

Mmbostock

95% match

Loading thumbnail…

Rainbow Luminance

Two horizontal bands compare the HSL rainbow to its luminance-only counterpart. The top band uses `d3.hsl` to produce the full rainbow, while the bottom band converts that color to HCL via `d3.hcl` and sets chroma to zero, isolating perceived lightness. Both bands are drawn as 1-pixel-wide Canvas images stretched vertically, generated with `createImageData` and `putImageData`, and labeled to the left of each strip. The visualization demonstrates that the HSL rainbow’s brightness varies widely across hues, making it unsuitable for data encoding.

Mmbostock

79% match

Loading thumbnail…

A Less-Angry Rainbow

Three rainbow color scales are compared in two horizontal bands each, rendered as 1-pixel-high Canvas images stretched vertically. The first band shows the original colors, while the second band removes chroma (sets `c = 0` via `d3.hcl`) to reveal lightness variation. The scales include HSL, HCL, and a cubehelix scale built with `d3.scale.cubehelix` and a custom `d3.interpolateCubehelix` interpolation. The code uses D3 v3 and Canvas `putImageData` to draw each scale.

Mmbostock

76% match

Loading thumbnail…

Lab and HCL Color Spaces

Four horizontal gradients compare color interpolation across RGB, HSL, Lab, and HCL color spaces. Each row renders a 960-pixel-wide linear scale transitioning from pale yellow to dark blue, using `d3.scale.linear` with the respective `d3.interpolateRgb`, `d3.interpolateHsl`, `d3.interpolateLab`, or `d3.interpolateHcl` method. The code draws each gradient into a 1-pixel-high Canvas via `putImageData`, then stretches it vertically for display. This juxtaposition reveals how perceptually uniform Lab and HCL spaces avoid the muddy midtones visible in RGB and HSL interpolation.

Mmbostock

70% match

Loading thumbnail…

HCL Color Space

A two-dimensional cross section of the HCL color space maps hue from 0° to 360° vertically and luminance from 100 to 0 horizontally, with chroma held constant at 50. The visualization uses d3.hcl to compute RGB values for each pixel, writing them directly to a Canvas `ImageData` buffer. The resulting gradient reveals how perceived color and brightness shift across the HCL space, rendered at a 960×500 resolution.

Mmbostock

70% match

Loading thumbnail…

Rainbows are Harmful

This example uses a rainbow color scale to recolor an existing image, demonstrating how the popular hue-cycling ramp distorts perceptual ordering. It loads a bitmap via an HTML `Image` object, draws it to a Canvas, and then reads its pixel data with `getImageData`. The code remaps each pixel’s red channel using `d3.scale.linear` with an HSL interpolation from 0 to 360 degrees, then writes the new RGB values back with `putImageData`. The result visibly replaces the original colors with a smooth but misleading spectrum, illustrating the scale’s perceptual non-uniformity.

Mmbostock

69% match

Loading thumbnail…

Custom color scale

A sequence of 100 rectangles demonstrates a custom color scale, transitioning from green to grey. The scale is created with `scaleLinear` and uses `interpolateHcl` for color interpolation, mapping the domain from 1 to 20. Each rectangle is positioned horizontally and filled with a color from this scale, providing a visual representation of the HCL color space's smooth gradient. The visualization is rendered as SVG elements using D3 v5.

PPedro Ernesto Tramontina

68% match

Loading thumbnail…

N Colors

Sixteen vertical rectangles fill the viewport, each displaying a distinct color generated in HCL color space. Hue cycles evenly around the color wheel while chroma stays fixed at 50, and luminance varies randomly following a normal distribution centered at 30 with a standard deviation of 10. The example uses d3.scaleBand for layout, d3.scaleOrdinal for color assignment, and d3.hcl to construct colors with random luminance from d3.randomNormal and d3.randomLcg.

CCurran Kelleher

67% match