Web developer, mastering D3 and React, love data visualization and color spaces.
oppositeCubeColor = ({
mode: color.mode,
r: 1 - color.r,
g: 1 - color.g,
b: 1 - color.b
})
cpcResult = cpc.findOppositeColor(
culori.itp(color),
culori.itp(origin),
inGamut(culori.inGamut(color.mode))
)
scale = cpc.cartesianColorScale([culori.itp(color), culori.itp(origin)])
gamutStretchedScale = scale.stretch(inGamut(culori.inGamut(color.mode)))
edge = gamutStretchedScale(0)
edgeToOrigin = cpc.cartesianColorScale([edge, culori.itp(origin)])
closestPointOnScale = edgeToOrigin.invert(culori.itp(color))
oppositeEdge = gamutStretchedScale(1)
oppositeEdgeToOrigin = cpc.cartesianColorScale([
oppositeEdge,
culori.itp(origin)
])
result = oppositeEdgeToOrigin(closestPointOnScale)
sRgbGamut = ({
name: "sRGB",
cssGamut: "srgb",
fitsGamut: culori.displayable
})
p3Gamut = ({
name: "Display-P3",
cssGamut: "display-p3",
fitsGamut: culori.inGamut("p3")
})
diff = culori.differenceItp()
formatHexOrCss = (color) =>
culori.displayable(color) ? culori.formatHex(color) : culori.formatCss(color)
findOppositeColor = (vertex, { cssGamut, fitsGamut }) => {
const color = culori.parse(vertex.toCssString(cssGamut));
const oppositeColor = culori.p3(
cpc.findOppositeColor(
culori.itp(color),
culori.itp(origin),
(color) =>
diff(culori.itp(culori.xyz65(color)), color) < 0.0001 && fitsGamut(color)
)
);
return { oppositeColor, deltaE: Math.round(diff(color, oppositeColor)) };
}
inGamut = (fitsGamut) => (color) =>
diff(culori.itp(culori.xyz65(color)), color) < 0.0001 && fitsGamut(color)
color && origin && dragRotateGroups.clear()
culori = import("culori@4")
import { ramp, p3Swatch } from "@devgru/color-scale-utils"
import { cg } from "@devgru/cg-latest"
import { cpc } from "@devgru/cpc-latest"
import { colorPicker } from "@devgru/color-picker"
import {
colorSpace3D,
colorToCompressedItpPoint,
colorToRotatedP3Point,
dragRotateGroups
} from "@devgru/color-space-3d"
import { itpDisclaimer } from "@devgru/ictcp"
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.
