Skip to main content
100%

ColorBrewer2.org - color advices for cartography

✓ Published0🌍 Public
Aant1j
Last edited Mar 13, 2016
Created on Mar 13, 2016

This example displays every ColorBrewer color scale as a clickable palette, with each scale reduced to its highest-class swatches. Clicking a palette prints that scale’s hexadecimal colors to the browser console. The page loads the colorbrewer.v1.min.js dataset and renders the palettes using D3 v3’s data join, appending span elements with inline background-color styles. It relies on d3.entries, d3.keys, and d3.descending to parse and sort the color values.

AI-generated description

[By Mike Bostock, for later reuse.]

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

forked from <a href='http://bl.ocks.org/hugolpz/'>hugolpz</a>'s block: <a href='http://bl.ocks.org/hugolpz/d7aabf5d5cde392e5b9c'>ColorBrewer2.org - color advices for cartography</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/ce23ed7d2d72545f956d'>ColorBrewer2.org - color advices for cartography</a>

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
88% match
Loading thumbnail…

Colorbrewer in D3

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.

AAlark Joshi
86% 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
84% 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…

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
75% 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…

colorPalettes

This interactive visualization showcases color palettes generated by rotating the hue of a base color. The view displays six columns, each containing nine shades that transition from light to dark via a linear scale, alongside a row of original base colors. Users can click any color square to copy its hex value to the clipboard, which triggers a temporary tooltip confirming the action. Built with d3.v7, the SVG graphic uses d3.hsl to manipulate hue, d3.scaleLinear to interpolate lightness and saturation, and d3.select for DOM interactions.

GGabriel Ing
74% match