Skip to main content
SimilarExport ZIP
100%

Quick reference to ColorBrewer

✓ Published1🌍 Public
AAlark Joshi
Last edited Apr 17, 2025
Created on Apr 17, 2025
Forked from HTML Starter

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.

AI-generated description

Visual reference to Colorbrewer. Converted example by Elijah Meeks from https://gist.github.com/emeeks/8cdec64ed6daf955830fa723252a4ab3

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
82% 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
76% 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
71% 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
71% 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
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
68% 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
68% 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
68% match