Skip to main content
SimilarExport ZIP
100%

Every ColorBrewer Scale

✓ Published0🌍 Public
Mmbostock
Last edited Feb 26, 2019
Created on May 14, 2013

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.

AI-generated description

A quick visual reference to every ColorBrewer scale; colors by Cynthia Brewer. Click on a palette to log the constituent colors in hexadecimal RGB to the console.

See also d3-scale-chromatic.

gpl-3.0 Licensed

Similar vizzes

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…

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

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

Color Palette Fork

This visualization displays a color palette as a grid of interactive circles, each filled with a specific RGB hex value from a CSV file and labeled with its corresponding keyword. Hovering over any circle scales it up slightly to highlight the selection. The page uses D3.js v7's `d3.csv` to load and bind the remote data, then selects and styles DOM elements to render the circles. It also fetches the CSV file’s size via `fetch` with a HEAD request to report data length, along with row and column counts.

Ssdarsi2404@gmail.com
71% match
Loading thumbnail…

Color Palette Fork

This visualization displays a color palette as a grid of interactive circles, each filled with a specific RGB hex value from a CSV file and labeled with its corresponding keyword. Hovering over any circle scales it up slightly to highlight the selection. The page uses D3.js v7's `d3.csv` to load and bind the remote data, then selects and styles DOM elements to render the circles. It also fetches the CSV file’s size via `fetch` with a HEAD request to report data length, along with row and column counts.

Ssdarsi2404@gmail.com
71% match
Loading thumbnail…

Color Palette Fork

This visualization displays a color palette as a grid of interactive circles, each filled with a specific RGB hex value from a CSV file and labeled with its corresponding keyword. Hovering over any circle scales it up slightly to highlight the selection. The page uses D3.js v7's `d3.csv` to load and bind the remote data, then selects and styles DOM elements to render the circles. It also fetches the CSV file’s size via `fetch` with a HEAD request to report data length, along with row and column counts.

Ssdarsi2404@gmail.com
71% match