Design at Observable
Published
Edited
Feb 2, 2021
14 forks
Importers
43 stars
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.0767245293 * l - 3.3072168827 * m + 0.2307590544 * s),
255 * gamma(-1.2681437731 * l + 2.6093323231 * m - 0.3411344290 * s),
255 * gamma(-0.0041119885 * l - 0.7034763098 * m + 1.7068625689 * 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.4121656120 * r + 0.5362752080 * g + 0.0514575653 * b;
const m = 0.2118591070 * r + 0.6807189584 * g + 0.1074065790 * b;
const s = 0.0883097947 * r + 0.2818474174 * g + 0.6302613616 * 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.
