ColorBrewer Spline

100%

ColorBrewer Spline

✓ Published0🌍 Public

Last edited Jul 4, 2016

Created on Jun 5, 2016

This example converts the eleven-color ColorBrewer “PiYG” scheme into a continuous color scale by interpolating in RGB color space using uniform one-dimensional b-splines. It shows a set of circles representing the original discrete colors, with three channels plotted as red, green, and blue curves, alongside a canvas gradient that visualizes the resulting smooth interpolation. Using d3-scale-chromatic for the source colors, the code relies on d3.interpolateRgbBasis and d3.interpolateBasis to generate the continuous scale, while rendering the curves with SVG paths and the gradient via Canvas createImageData.

AI-generated description

Using uniform one-dimensional b-splines to interpolate in RGB color space, we can convert a discrete color scheme to a continuous one. This shows the “PiYG” scheme from ColorBrewer which has eleven original colors. This scale, and many more, are available in d3-scale-chromatic.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

ColorBrewer Spline II

This example visualizes the differences between color interpolation methods by comparing splines in L\*a\*b\* color space to a direct linear interpolation. A horizontal canvas strip renders a gradient produced using `d3.interpolateBasis` on L\*a\*b\* channels, while an SVG chart plots the individual L, a, and b channel curves as both smooth basis splines and dashed linear segments. The code uses d3.lab, d3.interpolateBasis, and d3.line, with circular swatches showing the original PiYG palette colors at corresponding positions along the x-axis.

Mmbostock

88% match

Loading thumbnail…

Every ColorBrewer Scale

This gallery displays every ColorBrewer scale as a grid of color swatches grouped by palette name. Each palette, from YlGn to YlOrRd, shows its largest available color scheme as a row of small rectangles. The visualization is rendered using D3 v3, iterating over the embedded `colorbrewer` data structure with `d3.entries` and `d3.values`. Clicking any palette outputs its full set of hexadecimal color values to the browser console via `JSON.stringify`. The swatch colors come directly from Cynthia Brewer’s ColorBrewer data.

Mmbostock

78% match

Loading thumbnail…

TODO

This interactive tool visualizes color scales by plotting Bézier curves through multiple color spaces, including RGB, HSL, HCL, Lab, and Cubehelix. Users can edit input colors, adjust the number of output stops, and click to switch between basis and linear curve interpolation across each space’s channels. The page renders using SVG and includes animated draggable points on channel charts, with the current state shared via the URL. Forked from d3-based code by 1wheel, it addresses issues in Gregor Aisch’s Color Palette Helper for diverging scales.

11wheel

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…

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 Legend Example

This example demonstrates how to create a color legend using the d3-legend library in conjunction with ColorBrewer color scales. The visualization renders an SVG-based legend with a series of colored swatches, each paired with a text label. The color palette is drawn from ColorBrewer's sequential schemes, providing visually distinct and perceptually uniform colors. The example highlights how to integrate a third-party legend library with D3's SVG rendering to efficiently produce clean, customizable legends for data visualizations.

CCurran Kelleher

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

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

70% match