Sequential scale

100%

Sequential scale

✓ Published0🌍 Public

Last edited Apr 14, 2020

Created on Apr 14, 2020

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

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

84% match

Loading thumbnail…

Fork of Fork of D3 Scale - scaleSequential

Eleven circles arranged along a horizontal line demonstrate the `d3.scaleSequential` API with a rainbow interpolator. Each circle’s horizontal position is mapped by a linear scale from data values 0 to 100 to pixel coordinates, while its fill color uses the sequential scale’s domain to sample `d3.interpolateRainbow`. The circles render as SVG elements via a data join, with D3 v7 handling the DOM updates. The example contrasts continuous positioning with continuous color mapping, showing how two scales can drive different visual channels from the same dataset.

SSubhendu Karmakar

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

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

78% match

Loading thumbnail…

D3 4.0 Sequential Scales Explorer

This interactive heatmap visualizes a 2D histogram of date and value data, with cell colors encoding counts. A dropdown menu and auto-cycling animation let users switch among sequential color interpolators from D3 4.0’s `d3.scaleSequential` and the `d3-scale-chromatic` library, including Viridis, Inferno, and ColorBrewer schemes. Built with D3 4.0, it renders SVG rects and axes, loading data from a CSV file.

CCurran Kelleher

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

76% match

Loading thumbnail…

Untitled

This example demonstrates how to create a continuous color legend using D3’s `d3.scaleSequential` with the interpolator `d3.interpolateViridis`. The legend is rendered as a vertical gradient bar on a Canvas element, where each pixel’s color is drawn with the Canvas 2D API. An SVG overlay adds a `d3.axisRight` for numeric tick labels, with the color scale domain set from 0 to 7. The code uses D3 v5 with the d3-scale-chromatic module for interpolators.

Mmkt-ds

75% match