Playing with hues

100%

Playing with hues

✓ Published0🌍 Public

Last edited Oct 4, 2017

Created on Oct 4, 2017

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.

AI-generated description

Built with blockbuilder.org

This visualization was inspired by one of Tamara Munzner's examples in Visualization Design and Analysis. I built this from scratch to experiment with some scales.

mit Licensed

Similar vizzes

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

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

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

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

75% match

Loading thumbnail…

Interactions 1

Four colored squares render in an SVG, initially gray. Hovering over a square fills it with its assigned color using D3's `mouseenter` and `mouseout` events, which call `d3.select(this).style` to change the fill. After three seconds, a `setTimeout` triggers the `dispatch` method to simulate a mouseout, and then removes both event listeners, leaving the squares interactive only briefly. The code binds an array of hex colors to `rect` elements using `d3.selectAll` and `data`.

Jjbruzzo

75% match

Loading thumbnail…

oefening scales

Four horizontal bars illustrate linear scaling in D3.js v4. Each rectangle’s width maps a value from the fixed data array `[120,40,5,100]` through a `d3.scaleLinear` domain to a pixel range, while a second `d3.scaleLinear` interpolates fill color from red to blue across the same values. The SVG canvas is 500 by 500 pixels, with bars stacked at 100-pixel intervals. This example demonstrates how a single quantitative scale can drive both geometry and color encoding.

GGeoJonna

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

74% match

Loading thumbnail…

D3 scales() scaleQuantize() in action

This example demonstrates how `d3.scaleQuantize()` maps a continuous numeric input domain to discrete output ranges, using it to assign fill colors to a series of rectangles. The visualization renders 100 SVG rectangles, positioned with a `d3.scaleLinear()` scale and colored with a quantize scale that divides the domain [0, 100] into four color bands: lightblue, orange, lightgreen, and pink. The code uses D3 v7’s `join()` method to bind data from `d3.range()` and style each rectangle’s fill based on its value.

SSubhendu Karmakar

74% match