canvasFromImageData(solidColorImageDataGenerator("blue"))
canvasFromImageData(
solidColorImageDataGenerator([128, 128, 128], { width: 256, height: 256 })
)
canvasFromImageData(duotonePatternImageDataGenerator())
canvasFromImageData(
duotonePatternImageDataGenerator({
toneA: "yellow",
toneB: "blue"
})
)
function integerBufferToColorizedImageData(
eUint32,
lutBuffer,
{ stretch = true, colorSpace = DEFAULT_IMAGEDATA_COLOR_SPACE } = {}
) {
let { width, height, buffer, min, max, bitDepth } = eUint32;
let range = stretch ? max - min : 1 << bitDepth;
let scaleSteps = lutBuffer.length / 4;
let factor = range / scaleSteps;
let rgb = new ImageData(width, height, { colorSpace });
buffer.forEach((v, i) => {
const colorIndex =
Math.floor(stretch ? (v - min) / factor : v / factor) * 4;
const vRGB = lutBuffer.subarray(colorIndex, colorIndex + 4);
rgb.data.set(vRGB, i * 4);
});
return rgb;
}
canvasChannelsFromImageData(
duotonePatternImageDataGenerator({
toneA: "purple",
toneB: "turquoise"
}),
{ channels: [0, 2, 1] }
)
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.
