phd student, middle child
Published
Edited
Dec 14, 2020
1 fork
1 star
// notice how we are importing "zarr-lite/core'"
zarr = import('https://cdn.skypack.dev/@manzt/zarr-lite/core')
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]
chunkCoords = c => [0, c, 0, 0, 0]
draw_scan(z)
import { table } from '@tmcw/tables'
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.getRawChunk(chunkCoords(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] = z_arr.chunks.slice(-2);
const img = new ImageData(rgba, width, height);
const context = DOM.context2d(img.width / 2, img.height / 2, null);
context.putImageData(img, 0, 0);
return context.canvas;
}
z.chunks.slice(-2)
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.
