Skip to main content
SimilarExport ZIP
100%

Gist ac01c91d8c9c9dd4b825

✓ Published0🌍 Public
CCaged
Last edited May 11, 2015
Created on May 11, 2015

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.

AI-generated description

Similar vizzes

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
87% 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
83% 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
81% 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
80% match
Loading thumbnail…

RGB Color Picker

This interactive RGB color picker displays three horizontal channel strips (red, green, blue) as Canvas gradients, each with a draggable marker. The current color is composed from the selected values in all three channels, shown as a white/black marker line. The visualization uses D3 v3 with `d3.scale.linear`, `d3.interpolateRound`, `d3.svg.axis`, and the `d3.behavior.drag` interaction. Each strip is rendered with `createImageData` and `putImageData` on the Canvas, while SVG axes provide tick labels.

Mmbostock
80% 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
79% match
Loading thumbnail…

Perceptual Color Picker Prototype

This interactive prototype demonstrates picking colors in the HCL color space, where hue, chroma, and luminance sliders adjust a background color while a text field displays the current RGB hex value. Built with D3.js v5 and Topologica for reactive data flow, the visualization uses `d3.hcl` to convert slider inputs into color strings and updates the page background and form fields in real time. Users can also paste a hex color into the text field to sync the sliders, enabling perceptual adjustments like changing hue while preserving luminance. The sliders are bound via the `input` event, and Topologica manages the dependencies between color components, slider positions, and output display.

CCurran Kelleher
78% 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
78% match