Cubehelix Interpolation II

100%

Cubehelix Interpolation II

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jun 7, 2015

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.

AI-generated description

A test of interpolation in Cubehelix color space.

gpl-3.0 Licensed

Similar vizzes

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

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

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

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

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

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

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