Color luminance and saturation

100%

Color luminance and saturation

✓ Published0🌍 Public

Last edited Oct 18, 2017

Created on Oct 18, 2017

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.

AI-generated description

This visualization is forked from<a href='https://bl.ocks.org/curran'> curran</a >'s block: <a href='https://bl.ocks.org/curran/3a68b0c81991e2e94b19'>Responding to Resize</a >.

The source of data is from Color luminance & saturation.

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Color luminance and saturation

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.

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

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

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

77% match

Loading thumbnail…

An Exmple for D3.scaleSequential

This example demonstrates how D3’s `scaleSequential` maps continuous numeric domains to color interpolators. It shows two rows of rectangles, each colored by a different sequential scale: one using `interpolateRdGy` and another using `interpolateReds`. The code uses `scaleSequential` with explicit domains and applies the resulting colors as SVG fill styles. A `scaleLinear` positions the rectangles horizontally, and black-outlined polygons mark a selected range. The visualization relies on D3 v5 and renders entirely as SVG.

NNikkor

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…

Sequential scale

This example visualizes a color scale applied to a series of circles along a horizontal axis, showing how a sequential color interpolator maps numeric values to colors. The circles are positioned using a linear scale, while their fill colors are determined by `d3.scaleSequential` with the `d3.interpolatePlasma` interpolator. The code uses D3 v4 to bind an array of data values to SVG circles, rendering them within an SVG container. The visualization demonstrates the smooth gradient transitions of the plasma color scheme across the range of input values.

Pphlppchrtn

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

75% match