How many shades of blue do you need?

100%

How many shades of blue do you need?

✓ Published0🌍 Public

Last edited Aug 23, 2017

Created on Aug 23, 2017

This visualization displays a grid of horizontal bands, each containing a sequence of color swatches that progressively interpolate through a seven-color blue palette. The number of swatches per band increases from 2 to 40, demonstrating how the discrete steps of a continuous linear color scale change with sample size. Built with D3 v4, the example uses `d3.scaleLinear` to map index positions to colors, `d3.scaleBand` for positioning, and renders all elements as SVG rectangles and text labels.

AI-generated description

Built with blockbuilder.org

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

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

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

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

70% match

Loading thumbnail…

A6 - Color Scales in D3

This example demonstrates four distinct D3.js visualizations, each employing a different color scale type: a bar chart using a sequential color scale, a diverging bar chart with a diverging scale, a scatterplot with a qualitative scale, and a line chart. The code uses D3’s `scaleSequential`, `scaleDiverging`, and `scaleOrdinal` APIs to map data values to colors. Each chart is rendered using SVG elements created via D3’s `select` and `append` methods. The visualizations are embedded as standalone pages, with the bar chart and diverging chart showing categorical comparisons, while the scatterplot and line chart reveal patterns across continuous variables.

DDuc Pham

70% match

Loading thumbnail…

Heat Map

This heat map visualizes a sequential color scale transitioning from purple to orange across a continuous spectrum. The view fills the browser window with 100 vertical rectangular bands, each colored via the `d3.scaleSequential` interpolator. The code uses `d3.interpolate` to blend the two colors, `d3.scaleLinear` for positioning, and SVG `<rect>` elements rendered with D3 v7. The example demonstrates how to construct a full-viewport gradient bar for quantitative data mapping.

KKhanAzmat

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

70% match

Loading thumbnail…

Custom color scale

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.

PPedro Ernesto Tramontina

69% match