phd student, middle child
refUrl = 'https://gist.githubusercontent.com/manzt/102eaa9652e181071d7e2c9fd0cc65d3/raw/5ae948a89c6bc78cbe57196ec8045cd1a988a0ff/LuCa-7color_Scan1.ome.tif_offsets.json'
// references v0
refs = fetch(refUrl).then(res => res.json())
// Initialize ReferenceStore
store = {
// Import `reference-spec-reader` module from CDN
const url = "https://esm.sh/@zarrita/storage@0.1.1/ref";
const { default: ReferenceStore } = await import(url);
return ReferenceStore.fromSpec(refs);
}
zarr = import("https://esm.sh/zarrita@0.5.1")
// Open multiscale Zarr pyramid
pyramid = {
const grp = await zarr.open.v2(store, { kind: "gruop" });
const rootAttrs = grp.attrs;
return Promise.all(
rootAttrs.multiscales[0].datasets.map(({ path }) =>
zarr.open.v2(grp.resolve(path), { kind: "array" })
)
);
}
draw_scan(pyramid[4])
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) => zarr.get(z_arr, [c, null, null]))
);
// 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 img = new ImageData(rgba, z_arr.shape[2], z_arr.shape[1]);
const context = DOM.context2d(img.width / 2, img.height / 2);
context.putImageData(img, 0, 0);
return context.canvas;
}
import { table } from '@tmcw/tables'
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.
