Cubehelix II

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Apr 30, 2014

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.

AI-generated description

More examples of the d3.interpolateCubehelix plugin, replicating four Python cubehelix examples. In the last two examples, a polylinear scale creates a diverging cubehelix color ramp, and an approximate recreation of Matteo Niccoli’s perceptual rainbow.

gpl-3.0 Licensed

Similar vizzes

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

87% match

Loading thumbnail…

Cubehelix Interpolation II

A single-row canvas at 960 by 1 pixels renders a continuous horizontal color gradient, testing how interpolation behaves in Cubehelix color space. The code uses D3’s color module to compute the transition between two endpoint colors, drawing each column to the canvas with the `fillRect` method. This demonstrates how the Cubehelix model’s hue, saturation, and lightness axes produce a smooth, perceptually balanced ramp.

Mmbostock

82% match

Loading thumbnail…

Cubehelix Interpolation

This example demonstrates color interpolation in Cubehelix color space by rendering a horizontal gradient across a 960-pixel canvas. The visualization uses d3-color, specifically the `d3.cubehelix` interpolation method, to smoothly transition between colors along the visible spectrum. The single-row canvas is stretched vertically via CSS to create a tall, banded display. The code implements the full d3-color library inline, including color parsing, RGB and HSL conversions, and the Cubehelix interpolation logic, all rendered through the Canvas 2D API without additional libraries.

Mmbostock

80% match

Loading thumbnail…

Cubehelix Color Picker

This example presents an interactive Cubehelix color picker with three horizontal channel strips for hue, saturation, and lightness. Each strip renders a gradient swatch on a canvas element with an SVG axis below it, using d3.svg.axis to label the value ranges. The code relies on d3-color’s `cubehelix` and `hsl` functions to convert channel values into displayable colors, drawing the gradient bars programmatically via canvas `getImageData`. The interface allows direct manipulation of each channel to explore the three-dimensional color space.

Mmbostock

79% match

Loading thumbnail…

Cubehelix Color Space

A two-dimensional cross section of the Cubehelix color space shows hue from 0° to 360° along the vertical axis and lightness from 1 to 0 along the horizontal, with saturation held constant at 1. The canvas renders these colors by mapping each pixel coordinate to a Cubehelix value and converting it to RGB using the d3-color library. The visualization demonstrates the full gamut of the color space through a continuous gradient.

Mmbostock

78% match

Loading thumbnail…

Cubehelix Color Picker

The Cubehelix Color Picker displays three horizontal channels—hue, saturation, and lightness—as gradient strips, each paired with an axis. It uses D3.js to render the axes and SVG structure, while Canvas draws the color gradients. The visualization demonstrates the cubehelix color space by letting viewers compare how each channel varies independently, with the final color resulting from the combination of all three channels.

CCaged

77% match

Loading thumbnail…

Color ramp maker

This tool generates color ramps by interpolating between two user-selected hex colors. A linear gradient bar is rendered as a series of divs, each showing the computed intermediate color and its hex code. Users adjust the start and end colors via jscolor pickers, set the number of entries, and click build; d3.scaleLinear performs the color interpolation. Clicking a swatch copies its hex code to the clipboard.

LLuisSevillano

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

77% match