Color luminance and saturation

100%

Color luminance and saturation

✓ Published0🌍 Public

Last edited Sep 26, 2017

Created on Sep 22, 2017

Two horizontal strips of small squares demonstrate how the sequential color scales `d3.interpolateGreys` and `d3.interpolateOranges` change with luminance and saturation. The top strip shows four gray shades, the bottom four orange shades, each sampled at equal intervals from zero to four via `d3.scaleSequential`. Rendered as SVG rectangles in d3.v4, the example uses `d3-color` and `d3-scale-chromatic` to produce the fills, with the squares positioned using `d3.scaleLinear`. The visual contrast between the monochromatic gray ramp and the saturated orange ramp highlights how lightness and color intensity vary independently across each scale's domain.

AI-generated description

Built with blockbuilder.org

Inspired by Color hue

mit Licensed

Similar vizzes

Loading thumbnail…

Color luminance and saturation

This example displays two horizontal sequences of four squares each, one using a grey sequential color scale and the other using an orange scale, to illustrate how luminance and saturation vary across interpolated color steps. The visualization uses d3.scaleSequential with d3.interpolateGreys and d3.interpolateOranges to map the domain [0, 4] to filled SVG rectangles. The squares redraw responsively on window resize, recomputing their positions and sizes based on the current viewport dimensions.

TTaraZhu

92% match

Loading thumbnail…

Playing with hues

Two rows of small squares demonstrate two sequential color scales in D3 v4. The top row shifts through grays while the bottom row shows greens, with each square’s fill set via `d3.scaleSequential` and `interpolateGreys`/`interpolateGreens`. The layout uses linear `d3.scaleLinear` functions for x and y positions within an SVG, with hardcoded data arrays for the coordinates. A text label titles the exercise in color mechanics.

RRobertDelgado

81% match

Loading thumbnail…

4.0 Color Scales - Sequential

This example showcases 27 sequential color scales, comparing those built into D3 v4 with those from the d3-scale-chromatic library. The visualization renders a full-width set of thin vertical bars, initially colored using the Inferno scale, with each bar’s fill mapped to its x-position via a `d3.scaleSequential` interpolator. Clicking a button above the chart triggers a transition that smoothly recolors the bars using the selected interpolator, such as Viridis, Blues, or YlGnBu. The interface uses SVG rectangles and D3’s transition API for animated updates, with the code leveraging `d3.range` and data-driven styling.

TThanaporn-sk

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

77% match

Loading thumbnail…

Fork of An Exmple for D3.scaleSequential

This example demonstrates two D3 sequential color scales by rendering rows of rectangles with varying values. The top row uses `d3.scaleSequential` with the `interpolateRdGy` interpolator, while the bottom row applies `interpolateReds` to a shifted domain. Each rectangle’s fill color maps a numeric value from a fixed range, with black outlines highlighting individual cells. The code uses `d3.scaleLinear` for positioning and renders the SVG output via D3 selections and the `style('fill')` property.

Llimenzi

76% match

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

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

D3 Scale

This example demonstrates how D3 scales map input data to visual output, using a linear scale to position circles along the x-axis and a multi-domain color scale to assign fill colors. The circles represent values from -10 to 10, with colors transitioning from red through gray to blue. It renders as an SVG using d3.scaleLinear for both positioning and color interpolation, with data bound through d3.select and .join(). The code references D3 v7 scale types in utils.js, including scaleTime, scaleBand, and scaleOrdinal, though only linear scales are actively applied.

SSubhendu Karmakar

75% match