phd student, middle child
Published
Edited
Sep 22, 2020
Importers
2 stars
zchunkstore = fetch(url + '.zchunkstore').then(response => response.text())
class HTTPFileChunkStore {
constructor(url, chunk_offsets) {
this.url = url;
this.chunk_offsets = chunk_offsets;
}
async getItem(key) {
const res = this.chunk_offsets[key];
if (!res) {
throw new zarr.KeyError();
}
if (!("offset" in res)) {
// metadata may just be in the offsets JSON and not in the binary file
const meta = JSON.stringify(res);
const enc = new TextEncoder().encode(meta);
return enc.buffer;
}
const { offset, size } = res;
// make range request
const chunk = await fetch(this.url, {
headers: { Range: `bytes=${offset}-${offset + size - 1}` }
}).then(res => res.arrayBuffer());
return chunk;
}
async containsItem(key) {
const res = this.chunk_offsets[key];
if (!res) return false;
return true;
}
}
store = new HTTPFileChunkStore(url, JSON.parse(zchunkstore))
z = zarr.openArray({ store })
arr = z.getRaw([null, null, null]) // read entire image from store
image = {
// Create image data from array selection
const { data, shape } = arr;
const img = new ImageData(
new Uint8ClampedArray(data.buffer),
shape[1],
shape[0]
);
// Draw image
const context = DOM.context2d(img.width / 2, img.height / 2);
context.putImageData(img, 0, 0);
return context.canvas;
}
zarr = import('zarr@0.3')
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.
