color scale

100%

✓ Published0🌍 Public

Last edited Jun 15, 2016

Created on Jun 15, 2016

This example displays a two-dimensional color gradient across a 960-by-500 canvas, with hue and lightness varying along the horizontal and vertical axes. The code uses D3 v4’s `d3.hcl` color space to generate colors, then paints each pixel individually via the Canvas 2D API’s `fillRect`. It also loads the d3-hsv and d3-scale-chromatic modules for extended color support, though only HCL values are used in the final rendering. The nested `d3.range` loops iterate over every x and y coordinate to fill the canvas with a smooth, continuous color field.

AI-generated description

built during d3 fun time with kai chang

Similar vizzes

Loading thumbnail…

Colorspaces

This visualization maps the HCL color space onto a 960-by-500 pixel canvas, with hue varying horizontally and lightness varying vertically at full chroma. Each pixel is drawn individually using Canvas’s `fillRect` method, and the color is computed via `d3.hcl()` from the d3-color API. The result is a smooth gradient that reveals the perceptual structure of the HCL space, where horizontal bands show hue transitions and vertical shifts alter lightness. The code uses `d3.range()` to iterate over every pixel, and the page includes the d3-hsv and d3-scale-chromatic libraries, though only the HCL constructor is exercised here.

AAlec Burch

86% match

Loading thumbnail…

Colorspaces

This visualization uses 500×500 colored pixels to represent the HCL color space across a canvas. It plots hue along the horizontal axis and lightness along the vertical axis, with chroma fixed at 100, showing the full gamut of colors as a smooth, continuous gradient. The code iterates through each pixel coordinate, calling `d3.hcl` from the d3-color library to generate the corresponding color, and draws it on a Canvas element via `d3.range` loops. The example relies on D3 v4 alpha and the d3-scale-chromatic module to provide the color interpolation.

AAjayyy

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

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

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

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

78% match

Loading thumbnail…

Discrete vs continuous sequential scales with d3-scale-chromatic

This example contrasts discrete and continuous sequential color scales by drawing two bands of vertical lines on a canvas, with an SVG axis overlay. The top band uses a `d3.scaleThreshold` with `d3.schemeGreens[5]` to produce five distinct color steps, while the bottom band uses a `d3.scaleSequential` with `d3.interpolateGreens` for a smooth gradient. Both map a 0–100 domain to color, with lines sampled every 0.001 units. The code renders 100,000 lines per band using the Canvas 2D API for speed, while D3 v4 and d3-scale-chromatic handle the scales and axis.

Aandyreagan

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

78% match