Color-Space ViewerLuminance in Color SpacesColor-Scale ViewerCategorical Color-Scale ViewerColor-Surface HelpersColor-Scale ThemesCategorical Color-Scale TryoutQuantitative Color-Scale TryoutAccessibility: Color-Contrast ModelsColor-Vision-Deficiency WidgetColor Utilities
Chroma and Hue in Color Spaces
colors = tidy.tidy(
colorsAll,
tidy.filter((d) => d.munsell.V == munsellValue),
tidy.mutate({
sRgb: (d) =>
_.flow([
colorUtils.linearRgbFromSRgb,
(x) => math.multiply(matCvd, x),
colorUtils.linearRgbToSRgb,
colorUtils.clampRgbGamut
])(d.sRgb),
space: (d) => {
const [L, a, b] = transitionInterpolate(spaceTrans, (space) =>
_.flow(
[colorSpaces[space].fromSRgb, colorSpaces[space].to100]
)(d.sRgb)
);
return { L, a, b };
},
hex: (d) => colorUtils.hexFromSRgb(d.sRgb)
})
)
transitionFilter(
transitionGenerator(viewof cvd.children[1], {
states: ["none", "protan", "deuteran", "tritan"]
}),
viewof transGenCvd
)
viewof transGenCvd = Inputs.input()
matCvd = transitionInterpolate(transGenCvd, (state) =>
matrixCvd(state, cvd.severity)
)
colorsAll = tidy.tidy(
colorUtils.munsellRenotation,
tidy.filter((d) => colorUtils.inRgbGamut(d.sRgb)),
tidy.mutate({
space: (d) => {
const [L, a, b] = transitionInterpolate(spaceTrans, (space) =>
_.flow(
[colorSpaces[space].fromSRgb, colorSpaces[space].to100]
)(d.sRgb)
);
return { L, a, b };
}
})
)
getDomain = function (d) {
return {
a: d3.extent(d.map((x) => x.space.a)),
b: d3.extent(d.map((x) => x.space.b))
};
}
domain = getDomain(colorsAll)
transitionFilter(
transitionGenerator(viewof space, {
states: Array.from(colorUtils.mapColorSpaces().values())
}),
viewof spaceTrans
)
viewof spaceTrans = Inputs.input()
math = import("https://cdn.skypack.dev/mathjs@11.8.2?")
tidy = import("https://unpkg.com/@tidyjs/tidy@2.5.2/dist/es/index.js?module")
import { changeTable } from "@ijlyttle/change-log"
import { inputCvd, matrixCvd } from "@ijlyttle/cvd-widget"
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.
