render3dPlot = ({ points }) => {
const data = [
...facetDomain.map((algorithmFacet) => {
const facetPoints = points.filter((d) => d.algorithm === algorithmFacet);
return {
x: facetPoints.map((point) => point.a),
y: facetPoints.map((point) => point.b),
z: facetPoints.map((point) => point.l),
hovertext: facetPoints.map((point) => tooltip(point)),
name: algorithmFacet,
mode: "markers",
type: "scatter3d",
marker: {
size: settings.pathRadius,
color: facetPoints.map((point) => point.hex),
opacity: 1
}
};
}),
{
x: rgbGamutInOklab.map((point) => point.a),
y: rgbGamutInOklab.map((point) => point.b),
z: rgbGamutInOklab.map((point) => point.l),
mode: "markers",
name: "RGB gamut",
type: "scatter3d",
marker: {
size: 5,
color: rgbGamutInOklab.map((point) => point.hex),
opacity: settings.oklabTransparency
}
}
];
const layout = {
margin: {
l: 0,
r: 0,
b: 0,
t: 0
},
height: 600,
width: 800,
scene: {
camera: {
eye: {
x: 0,
y: -0.1,
z: 2
}
},
aspectmode: "manual",
aspectratio: {
x: 1,
y: 1,
z: 1
},
xaxis: {
title: {
text: "a"
}
},
yaxis: {
title: {
text: "b"
}
},
zaxis: {
title: {
text: "L"
}
}
}
};
const div = DOM.element("div");
return Plotly.newPlot(div, data, layout);
}