mutable selected = data[rings - 1][0]
f = d3.format(".3f")
fdegree = d3.format(".1f")
data = d3.range(rings).map((r, ri) => {
const maxScale = d3.scaleLinear()
.domain([0, rings - 1])
.range([0, M])
const max = maxScale(ri);
return d3.range(slices).map((s, si) => {
const value = si / slices;
const h = 2 * Math.PI * value + hOffset;
const C = max
const a = C * Math.cos(h)
const b = C * Math.sin(h)
return {
ring: ri,
i: si,
value,
lch: {
l: lightness, c:C, h
},
oklab: {
l: lightness, a, b
},
color: oklab(lightness, a, b),
};
})
})
pie = d3.pie()
.sort(null)
.value(1)
height = Math.min(width, 500)
oklab = (L, a, b) => {
const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
const s_ = L - 0.0894841775 * a - 1.2914855480 * b;
const l = l_ * l_ * l_;
const m = m_ * m_ * m_;
const s = s_ * s_ * s_;
return d3.rgb(
255 * gamma(+4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s),
255 * gamma(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s),
255 * gamma(-0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s)
);
}
oklabInverse = c => {
c = d3.rgb(c);
const r = gamma_inv(c.r / 255);
const g = gamma_inv(c.g / 255);
const b = gamma_inv(c.b / 255);
const l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
const m = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
const s = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
const l_ = Math.cbrt(l);
const m_ = Math.cbrt(m);
const s_ = Math.cbrt(s);
return {
L: 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_,
a: 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_,
b: 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_,
};
}
oklch = function(lightness, chroma, hue) {
const h = 2 * Math.PI * (hue / 360);
const C = chroma
const a = C * Math.cos(h)
const b = C * Math.sin(h)
return oklab(lightness, a, b)
}
oklch(0.5, 0.5, 180)
gamma = x => (x >= 0.0031308 ? 1.055 * Math.pow(x, 1 / 2.4) - 0.055 : 12.92 * x)
gamma_inv = x =>
x >= 0.04045 ? Math.pow((x + 0.055) / (1 + 0.055), 2.4) : x / 12.92
d3 = require("d3@6", "d3-hsv")
import { slider } from "@jashkenas/inputs"
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.
