Public
Edited
Oct 7, 2024
Importers
Plot.plot({
grid: true,
marginRight: 60,
facet: { label: null },
marks: [
Plot.frame(),
Plot.dot(penguins, {
x: "culmen_length_mm",
y: "culmen_depth_mm",
fx: "sex",
fy: "species"
}),
Plot.axisX([42, 41, 40, 39, 38, 43, 50], occludeAxisX()),
Plot.axisY([20, 19.5, 18, 16.5, 16, 14], occludeAxisY({ padding: 30 }))
]
})
function occludeAxisX({ padding = 8, ...options } = {}) {
return occludeAxis({ ...options, axis: "x", dy: padding + 4, padding });
}
function occludeAxisY({ padding = 8, ...options } = {}) {
return occludeAxis({ ...options, axis: "y", dx: -padding - 4, padding });
}
function occludeAxis({ axis, ...options } = {}) {
const orthogonalAxis = axis === "y" ? "x" : "y";
return Plot.initializer(
(axis === "y" ? Plot.dodgeX : Plot.dodgeY)(options),
(data, facets, channels, scales, dimensions, context) => {
// To determine the preserved indices, we take the data points that have a resolved channel-value equal to the maximum/minimum channel-value.
console.log(typeof channels[orthogonalAxis].value);
const extent = (axis === "y" ? Math.min : Math.max)(
...channels[orthogonalAxis].value
);
const preservedIndices = channels[orthogonalAxis].value.reduce(
(acc, value, index) => (value === extent ? [...acc, index] : acc),
[]
);
// Then filter out the channels
// We don't need to filter data and facets because this is an initializer transform!
const newChannels = Object.fromEntries(
Object.entries(channels).map(([key, { value, ...channel }]) => [
key,
{ ...channel, value: preservedIndices.map((index) => value[index]) }
])
);
return { data, facets, channels: newChannels };
}
);
}
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.
