Public
Edited
Mar 30, 2023
2 stars
import {fetchProgress} from "@mbostock/fetch-progress"
import {fflate} from "@fil/hello-fflate"
url = "https://raw.githubusercontent.com/mroehlig/basic_web_volume_visualization/main/data/engine_256x256x128_uint8.raw.gz"
viewof buffer = fetchProgress(url, {mode: "cors"})
data = fflate.decompressSync(new Uint8Array(buffer))
filename = getFilename(url);
dimensions = getDimensions(filename);
{
const width = dimensions[0];
const height = dimensions[1];
const ctx = DOM.context2d(width, height, 1);
const sliceIndex = dimensions[2] / 2;
let image = ctx.getImageData(0, 0, width, height);
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
// Get the data value.
let index = (width * height) * sliceIndex + width * y + x;
let value = data[index];
// Set the image color.
let i = (image.width * y + x) * 4;
image.data[i] = value;
image.data[i + 1] = value;
image.data[i + 2] = value;
image.data[i + 3] = 255;
}
}
ctx.putImageData(image, 0, 0);
yield ctx.canvas;
}
function getFilename(url) {
return url.split('\\').pop().split('/').pop();
}
function getDimensions(filename) {
let dimensions = filename.split("_")[1].split("x").map((value) => parseInt(value));
return dimensions;
}
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.
