Skip to main content
SimilarExport ZIP
100%

An Exmple for D3.scaleSequential

✓ Published1🌍 Public
NNikkor
Last edited Sep 12, 2018
Created on Sep 12, 2018

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.

AI-generated description

Ming Zhang <br> This is an example for D3.scaleSequential. The code is inspired by the scaleSequential example in GitHub - d3/d3-scale

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
91% 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
87% 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
84% 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
81% 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
81% 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
79% 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
79% 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
77% match