Skip to main content
SimilarExport ZIP
100%

Cubehelix Interpolation

✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on Jun 6, 2015

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.

AI-generated description

A test of interpolation in Cubehelix color space.

gpl-3.0 Licensed

Similar vizzes

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
93% 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
89% match
Loading thumbnail…

HCL Interpolation

This example demonstrates color interpolation in the CIELCH color space, showing how hue transitions along the shortest path between two colors. An animated gradient sweeps horizontally across a canvas, with the starting and ending hues continuously shifting over time. The visualization uses the `d3.interpolateHcl` function from the d3-color module and the `d3.timer` function from the d3-transition module to drive the animation and render the gradient pixels with Canvas `putImageData`.

Mmbostock
83% 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
82% 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
82% match
Loading thumbnail…

HCL Interpolation II

A canvas displays a single horizontal strip of animated color that cycles through hues. The strip updates every frame using `d3.timer`, computing a gradient from one HCL color to another with `d3.interpolateHclLong`. The code writes RGB values into an `ImageData` buffer and draws it with `putImageData`, showing the long path between hues 360° apart.

Mmbostock
81% 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
80% 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
80% match