Colorbrewer in D3

100%

Colorbrewer in D3

✓ Published0🌍 Public

Last edited Mar 5, 2026

Created on Mar 5, 2026

The example displays a visual index of color palettes, starting with D3’s built-in categorical scales (category10, category20, category20b, category20c) as rows of colored squares. It then iterates through all palettes from ColorBrewer via the external `colorbrewer` script, rendering each scheme’s largest available class count. The SVG visualization uses `d3.select` to append the graph, `d3.entries` to enumerate palettes, and `d3.keys` combined with `d3.descending` to determine the maximum color count per scheme.

AI-generated description

MIT Licensed

Similar vizzes

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

85% match

Loading thumbnail…

Quick reference to ColorBrewer

This interactive reference visualizes all ColorBrewer palettes, displaying each as a row of color swatches that users can click to view the underlying color arrays. The page uses the `colorbrewer.min.js` library, which contains the palette data, and D3.js (version 3) to bind this data to the DOM, creating swatches via `d3.selectAll` and `d3.data`. Clicking a palette updates a text area with the JSON representation of its color values, providing a quick, hands-on way to explore sequential color schemes.

AAlark Joshi

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

78% match

Loading thumbnail…

ColorBrewer

This interactive dashboard presents three coordinated visualizations: a time-series plot of execution metrics, a ColorBrewer palette selector, and a bar chart of World Happiness rankings. The time-series chart uses d3.line and d3.scaleTime to render trends, with color-coded dots distinguishing TRUE/FALSE results. Clicking any palette swatch updates the happiness chart’s color scale via d3.scaleQuantize, which dynamically recolors the top-20 country bars. Tooltips appear on hover for both charts, built with D3 v7’s event handling and CSS transitions.

NNita

78% match

Loading thumbnail…

ColorBrewer Spline

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.

Mmbostock

78% match

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

74% match

Loading thumbnail…

Color in Data Visualization

This gallery example visualizes five fundamental color-scale patterns—sequential, diverging, categorical, highlight, and alert—through a grid of annotated mini bar charts. Each pattern shows how color encodes quantitative or categorical data, using palettes like blues for sequential, diverging browns and greens, and gray tints with accent colors for highlighting. The D3 v7 code uses `scaleLinear` and `scaleBand` to compute bar heights, while custom wrapping logic measures text via `getComputedTextLength`. The layout is fixed with responsive container sizing, and the visualization is based on concepts from "The Big Book of Dashboards."

CCurran Kelleher

72% match

Loading thumbnail…

list d3 color schemes

This example displays a list of color scheme names from the d3-scale-chromatic library, each with an accompanying note about the range of color counts it supports. The page uses `d3.select` to append an `h4` heading and a `div` for each scheme, dynamically reading the `range()` function from each generated scheme to display valid values. The schemes are defined directly in a bundled JavaScript file as hex strings, and the code relies on d3.v4’s selection and append methods for DOM manipulation.

PPhilippe Rivière

72% match