Public
Edited
Oct 24, 2023
1 fork
13 stars
Insert cell
Insert cell
Insert cell
color = d3.interpolateWarm
Insert cell
domain = [0, first, last, 1]
Insert cell
Insert cell
Insert cell
ramp(scale) // see code below
Insert cell
Insert cell
Insert cell
ramp(color)
Insert cell
Insert cell
tooSimple = d3
.scaleLinear()
.domain(domain)
.interpolate(() => color)
Insert cell
ramp(tooSimple) // 🌶 obviously too simple
Insert cell
Insert cell
Insert cell
range = d3.range(domain.length).map((i) => i / (domain.length - 1)) // fake range
Insert cell
scale = d3
.scaleLinear()
.domain(domain)
.range(range)
.interpolate((i, j) => (t) => color(i + t * (j - i)))
Insert cell
ramp(scale)
Insert cell
Insert cell
Insert cell
Insert cell
newrange = [1, .85, .2, .4]
Insert cell
sculpted = d3
.scaleLinear()
.domain(domain)
.range(newrange)
.interpolate((i, j) => (t) => color(i + t * (j - i)))
Insert cell
ramp(sculpted)
Insert cell
Insert cell
creative = d3
.scaleLinear()
.domain([0, .35, .65, 1])
.range([.5, 0, 3, 3.5])
.interpolate((i, j) => (t) => d3.interpolateSinebow(i + t * (j - i)))
Insert cell
ramp(creative)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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
});
}
Insert cell
// 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))
Insert cell
import { ramp } from "@mbostock/color-ramp"
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more