Custom color scale

100%

Custom color scale

✓ Published0🌍 Public

Last edited May 4, 2020

Created on Apr 30, 2020

Forked from Blank

A sequence of 100 rectangles demonstrates a custom color scale, transitioning from green to grey. The scale is created with `scaleLinear` and uses `interpolateHcl` for color interpolation, mapping the domain from 1 to 20. Each rectangle is positioned horizontally and filled with a color from this scale, providing a visual representation of the HCL color space's smooth gradient. The visualization is rendered as SVG elements using D3 v5.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Color Scale

A sequential color scale maps a simple array of integers 0 through 39 to the PiYG interpolator, producing a smooth purple-to-green gradient across a single row of rectangular swatches. The visualization, built with D3 v5, uses `d3.scalePoint` to position each rectangle along the x-axis and `d3.scaleSequential` with `d3.interpolatePiYG` to assign its fill. Each rectangle’s width equals the point scale’s `step()`, creating a contiguous band. The rendered SVG highlights how sequential color scales encode ordered data, with the gradient clearly representing the numeric progression from low to high values.

AAlexDaGr8

78% match

Loading thumbnail…

N Colors

Sixteen vertical rectangles fill the viewport, each displaying a distinct color generated in HCL color space. Hue cycles evenly around the color wheel while chroma stays fixed at 50, and luminance varies randomly following a normal distribution centered at 30 with a standard deviation of 10. The example uses d3.scaleBand for layout, d3.scaleOrdinal for color assignment, and d3.hcl to construct colors with random luminance from d3.randomNormal and d3.randomLcg.

CCurran Kelleher

77% match

Loading thumbnail…

D3 Scale - ScaleSequential - Different Interpolators

This example demonstrates eight different D3 color interpolators applied to sequential scales, each rendered as a horizontal band of colored rectangles. The visualization shows how the viridis, inferno, magma, plasma, warm, cool, rainbow, and cubehelixDefault colormaps transition across a 0–100 domain, with each interpolator labeled above its corresponding row. The code uses `d3.scaleSequential()` with each interpolator to map data values to fill colors, while `d3.scaleLinear()` positions the rectangles along the x-axis. The SVG output is generated from range data via `d3.range()` and rendered with D3's data join pattern.

SSubhendu Karmakar

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

76% match

Loading thumbnail…

Colors Interpolation

Three color interpolation scales demonstrate how D3.js v4 maps numeric domains to color ramps, rendered as rows of circles in SVG. The first scale interpolates from red to green using two stops, the second adds a middle yellow stop, and the third uses eight discrete stops for a finer gradient. Each scale employs `d3.scaleLinear` with the `d3.interpolateHcl` color interpolator, while the circles are generated programmatically from a simple data array. The example illustrates how interpolation choice and stop density affect perceived color transitions.

EEfratVil

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

75% match

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

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

73% match