A Less-Angry Rainbow

100%

A Less-Angry Rainbow

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jun 22, 2014

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.

AI-generated description

Experimenting with a rainbow color scale that is cylical but has better perceptual properties. The HCL rainbow has roughly-constant luminance, but is ugly. The cubehelix rainbow, inspired by Matteo Niccoli’s <a href="http://mycarta.wordpress.com/2013/02/21/perceptual-rainbow-palette-the-method/">perceptual rainbow</a> but extended to 360°, varies in brightness but is prettier.

gpl-3.0 Licensed

Similar vizzes

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

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…

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

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

79% match

Loading thumbnail…

Cubehelix II

Six color ramps illustrate variations of the Cubehelix color scheme, including reversed, hue-shifted, diverging, and a perceptual rainbow approximation. Each ramp renders as a horizontal gradient on individual Canvas elements, with pixel colors computed via the `d3.scale.cubehelix` plugin and `d3.interpolateCubehelix`. A polylinear scale with multiple domain points creates the diverging ramps. The labels and layout are positioned absolutely via D3 selections and ordinal scales.

Mmbostock

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

76% match

Loading thumbnail…

Cubehelix

This example displays a single horizontal strip of continuously varying colors, demonstrating the default cubehelix color scheme. The gradient runs from one color to another across the canvas width, showing the perceptual characteristics of the ramp. The code defines a custom d3.scale.cubehelix using d3.interpolateCubehelix and applies it via a canvas element. It generates pixel data with createImageData and writes the color values directly into the image buffer, which is then rendered with putImageData.

Mmbostock

76% match

Loading thumbnail…

Gist ac01c91d8c9c9dd4b825

This example uses D3.js and the HTML5 Canvas API to render an interactive color picker that visualizes the HCL (Hue-Chroma-Lightness) color space. It shows a 500×500 pixel grid where the horizontal axis maps hue from 360 to 0 degrees, the vertical axis maps lightness from 0 to 100, and chroma is fixed at 35. The code uses `d3.scale.linear` to map pixel coordinates to color values, converts HCL to RGB via `d3.hcl().rgb()`, and writes the results directly to image data with `createImageData` and `putImageData`. Moving the mouse over the canvas triggers `getImageData` to read the pixel color and display its hex value in a label, demonstrating direct pixel manipulation without SVG or DOM elements.

CCaged

75% match