phd student, middle child
zarr = import('https://cdn.skypack.dev/@manzt/zarr-lite')
pyramid = {
const store = new zarr.HTTPStore(url); // can be _any_ zarr store
const rootAttrs = await zarr.getJson(store, '.zattrs');
let paths = [];
if ('multiscales' in rootAttrs) {
const { datasets } = rootAttrs.multiscales[0];
paths = datasets.map(d => d.path);
}
const p = paths.map(path => zarr.openArray({ store, path }));
return Promise.all(p);
}
z = pyramid[4]
draw_scan(z)
// EDIT ME and see how the image changes!
// `number` -> collapses selection along axis
// `null` -> full dimension slice
// `slice` -> slice(start, stop, step) or slice(stop) (like a python slice)
selection = channel => [0, channel, null, slice(200, 1600, 2), slice(1400)]
slice = zarr.slice // like a python slice
z.getRaw(selection(1))
async function draw_scan(z_arr, channels = [0, 1, 3]) {
// Fetch the 2D pixel arrays for each channel
const [r, g, b] = await Promise.all(
channels.map(c => z_arr.getRaw(selection(c)))
);
// Need to interleave the channels in RGBA buffer...
const rgba = new Uint8ClampedArray(4 * r.data.length).fill(0);
let offset = 0;
for (let i = 0; i < r.data.length; i++) {
rgba[offset] = r.data[i];
rgba[offset + 1] = g.data[i];
rgba[offset + 2] = b.data[i];
rgba[offset + 3] = 255; // alpha
offset += 4;
}
// Create image and draw to canvas
const [height, width] = r.shape.slice(-2);
const img = new ImageData(rgba, width, height);
const context = DOM.context2d(img.width / 2, img.height / 2);
context.putImageData(img, 0, 0);
return context.canvas;
}
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.
