Maps, Data, Viz, UX, Design
sequentialPaletteOklch = sequentialPalette.map(([l, c, h]) =>
new Color(`oklch(${l} ${c} ${h})`).toString()
)
sequentialPaletteHexCodes = sequentialPalette
.map(([l, c, h]) => new Color("oklch", [l, c, h]))
.map((color) => color.to("srgb").toString({ format: "hex" }))
colorOkLchArr = new Color(inputColor).to("oklch").coords
sequentialPalette = {
const [l, c, h] = colorOkLchArr;
const palette = lightnessValues.map((value, index) => [
value,
chromaValues[index],
h
]);
return palette;
}
scale = {
if (scaleType === "Linear") {
return d3.scaleLinear;
} else if (scaleType === "Square Root") {
return d3.scaleSqrt;
} else {
return d3.scalePow;
}
}
lightnessScale = {
const ls = scale([0, numberColors - 1], [maxLightness, minLightness]);
if (scaleType === "Exponential") {
ls.exponent(exponent);
}
return ls;
}
chromaScale = {
const cs = scale([0, numberColors - 1], [minChroma, maxChroma]);
if (scaleType === "Exponential") {
cs.exponent(exponent);
}
return cs;
}
lightnessValues = Array.from({ length: numberColors }).map((_, index) =>
lightnessScale(index)
)
chromaValues = Array.from({ length: numberColors }).map((_, index) =>
chromaScale(index)
)
format = d3.format(".2f")
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.
