Bivariate Color Schemes

100%

Bivariate Color Schemes

✓ Published0🌍 Public

Last edited Oct 9, 2025

Created on Sep 1, 2024

This example demonstrates bivariate color schemes for choropleth maps through a grid of color swatches. The visualization generates two color ramps using the `d3.cubehelix` function, each defined by a hue angle with varying luminance values, then interpolates between the two ramps with `d3.interpolateRgb` and `d3.interpolateCubehelix` to build a matrix of 25 colors. The resulting matrix is rendered as SVG rectangles, with the color of each cell reflecting the combined weight of two independent data dimensions. The code includes adjustable constants for color count, hue range, saturation, and luminance values.

AI-generated description

An attempt at a generic definition for bivariate color schemes. Inspired by Bivariate Choropleth Maps: A How-to Guide.

MIT Licensed

Similar vizzes

Loading thumbnail…

Automatic Color Schemes

This visualization demonstrates how color schemes can be automatically generated from configurable parameters for hue, saturation, and luminance. Nine distinct schemes are displayed, each containing seven colors that transition from dark to light via cubic interpolation in Cubehelix color space using D3’s `interpolateCubehelix`. The rendered output shows both circles and rectangles filled with the generated colors, with the `d3.cubehelix` function constructing endpoint colors based on the specified hue, saturation, and luminance bounds. The code selects numeric parameters from a CSV file, specifying the active scheme index.

CCurran Kelleher

79% match

Loading thumbnail…

Fork of Automatic Color Schemes

This example shows how color schemes can be automatically generated from configurations of hue, saturation, and luminance, displayed as vertical gradient bars across the screen. The code uses `d3.cubehelix` to define dark and light endpoints for each hue, then `d3.interpolateCubehelix` and `d3.range` to create seven-step gradients from those endpoints. It renders the resulting colors as adjacent SVG rectangles, with each rect slightly overlapping to produce seamless transitions. A CSV file provides a selected index, though the current code only reads it without affecting the visible output.

HHaili0109

75% match

Loading thumbnail…

Cubehelix II

Six color ramps illustrate variations of the Cubehelix color scheme, including reversed, hue-shifted, diverging, and a perceptual rainbow approximation. Each ramp renders as a horizontal gradient on individual Canvas elements, with pixel colors computed via the `d3.scale.cubehelix` plugin and `d3.interpolateCubehelix`. A polylinear scale with multiple domain points creates the diverging ramps. The labels and layout are positioned absolutely via D3 selections and ordinal scales.

Mmbostock

71% match

Loading thumbnail…

Multivariate Choropleth Experiments

This example visualizes racial demographics for New York census tracts using a multivariate choropleth. It blends three HCL color constants (white, Black, and Asian) with square root scales, applying a multiplicative color blend to produce composite hues per tract. The map renders via `d3.geoPath` with TopoJSON data, supports zoom interaction, and includes a legend built with `d3.scaleOrdinal`. Data comes from the American Community Survey API, fetched through a gist-hosted JSON file.

CCurran Kelleher

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

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

70% match

Loading thumbnail…

Bivariate Choropleth

This bivariate choropleth shows the racial distribution of New York census tracts, blending green for white population and orange for Black population using a color-mixing technique from `colorBlend.normal`. The map uses `d3.geoPath` to render topological features and `d3.scaleLinear` for each variable’s color mapping. Data is sourced from the American Community Survey (ACS) API, and the visualization includes zooming interactions via `d3.zoom` and SVG rendering.

CCurran Kelleher

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

69% match