color = d3.interpolateWarm
domain = [0, first, last, 1]
ramp(scale) // see code below
ramp(color)
tooSimple = d3
.scaleLinear()
.domain(domain)
.interpolate(() => color)
ramp(tooSimple) // 🌶 obviously too simple
range = d3.range(domain.length).map((i) => i / (domain.length - 1)) // fake range
scale = d3
.scaleLinear()
.domain(domain)
.range(range)
.interpolate((i, j) => (t) => color(i + t * (j - i)))
ramp(scale)
newrange = [1, .85, .2, .4]
sculpted = d3
.scaleLinear()
.domain(domain)
.range(newrange)
.interpolate((i, j) => (t) => color(i + t * (j - i)))
ramp(sculpted)
creative = d3
.scaleLinear()
.domain([0, .35, .65, 1])
.range([.5, 0, 3, 3.5])
.interpolate((i, j) => (t) => d3.interpolateSinebow(i + t * (j - i)))
ramp(creative)
show = (interpolate, caption) => {
const N = 300;
const asNumber = numeric(interpolate);
const V = []
.concat(
d3
.range(0, 1.000001, 1 / N)
.map((x) => ({ y: x, color: color(x) }))
)
.concat(
d3
.range(0, 1.000001, 1 / N)
.map((x) => ({ x: x, y: asNumber(x), color: interpolate(x) }))
);
return Plot.plot({
marks: [
Plot.ruleY(V, { y: "y", stroke: "color", strokeWidth: 2 }),
Plot.line(V, { x: "x", y: "y", strokeWidth: 2 }),
Plot.ruleX([0]),
Plot.ruleY([0])
],
color: { type: "identity" },
height: 200,
x: { label: "t →", domain: [0, 1] },
y: { label: "↑ color value", nice: true, grid: true, ticks: 8 },
caption
});
}
// fun fact: this function works with scaleLinear, but also scaleSqrt and scalePow;
// try it by changing the definition of scale!
numeric = (color) => d3.scalePow()
.exponent(color.exponent ? color.exponent() : 1)
.domain(color.domain())
.range(color.range())
.interpolate((i, j) => (t) => i + t * (j - i))
import { ramp } from "@mbostock/color-ramp"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
