Rainbow Luminance

100%

Rainbow Luminance

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Apr 27, 2014

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.

AI-generated description

The HSL rainbow (all hues at 100% saturation and 50% lightness) has highly variable luminance: we perceive some parts of the rainbow, such as between yellow and cyan, as significantly brighter than other parts of the rainbow. This, along with a lack of perceptual uniformity, makes the rainbow color scale unsuitable for visualization. Use the Lab or HCL color space instead.

gpl-3.0 Licensed

Similar vizzes

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

83% match

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

82% match

Loading thumbnail…

Rainbow Perceptual Distance

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`.

KKirun1

79% 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

76% 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

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

74% match

Loading thumbnail…

HSL Color Picker

Three horizontal color-gradient strips display the hue, saturation, and lightness channels of an HSL color model. Dragging any strip updates the selected color value, and each strip re-renders to show the resulting color variation. The visualization uses D3.js for axis rendering and drag behavior, while Canvas `putImageData` writes per-pixel RGB values for the gradients.

Mmbostock

73% match

Loading thumbnail…

HCL Color Picker

This example presents an interactive HCL color picker with three horizontal channel strips for hue, chroma, and lightness. Each strip displays a gradient of colors, and the user can drag a marker along any channel to adjust that component, with the current color shown as a white pixel and its predecessor as black. The visualization uses D3 v3 with SVG axes for channel scales and Canvas `createImageData` and `putImageData` to render the per-pixel gradients. The HCL color is converted to RGB via `d3.rgb`, and dragging is handled with `d3.behavior.drag`.

Mmbostock

72% match