makeInputHue = function () {
return Inputs.range([-225, 225], { label: "Hue", step: 0.1, value: 0 });
}
makeInputLuminance100 = function () {
return Inputs.range([0, 100], {label: "Luminance", step: 0.1})
}
makeInputDHue100 = function () {
return Inputs.range([-5, 5], { label: "Hue derivative", step: 0.01 });
}
makeInputHex = function ({ label = "Hex", value = "#FF0000" } = {}) {
return Inputs.color({ label: label, value: value });
}
makeInputColorSpace = function () {
return Inputs.radio(colorUtils.mapColorSpaces(), {
label: "Color space",
value: "munsell"
});
}
makePlot = function (surface, { width = 300, refs = [] } = {}) {
return Plot.plot({
width: width,
aspectRatio: 1,
grid: true,
x: { label: "chroma" },
y: { label: "luminance" },
marks: [
...surface.plotMarks100(),
Plot.dot(refs, {
x: "chroma",
y: "luminance",
r: 10,
stroke: "white",
strokeWidth: 2
}),
Plot.dot(refs, {
x: "chroma",
y: "luminance",
r: 12,
stroke: "black",
strokeWidth: 2
})
]
});
}
import {
colorSpaces,
colorUtils,
ColorSurface
} from "@ijlyttle/color-utilities"
import { changeTable } from "@ijlyttle/change-log"
import { inputMode, invokeMode, styleDark } from "@ijlyttle/dark-mode-input"
viewof dark = inputMode({ value: false })
invokeMode(dark)
styleDark()
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.
