Web developer and autodidact with an interest in creative coding.
Public
Edited
May 29, 2024
11 stars
{
const {naturalWidth: imgWidth, naturalHeight: imgHeight} = image;
const width = 600;
const height = width / imgWidth * imgHeight;
const minScale = width / imgWidth;
const canvas = d3.create("canvas")
.attr("width", width)
.attr("height", height)
.style("border", "1px solid #aaa");
const ctx = canvas.node().getContext("2d");
const onZoom = ({transform}) => {
const dx = transform.applyX(0);
const dy = transform.applyY(0);
const dw = transform.applyX(imgWidth);
const dh = transform.applyY(imgHeight);
ctx.clearRect(0, 0, width, height);
ctx.drawImage(image, dx, dy, dw - dx, dh - dy);
};
const zoom = d3.zoom().on("zoom", onZoom);
if(options.includes("set_scale_extent")) zoom.scaleExtent([minScale, 1]);
if(options.includes("set_translate_extent")) zoom.translateExtent([[0, 0], [imgWidth, imgHeight]]);
canvas.call(zoom);
if(options.includes("set_initial_scale")) zoom.scaleTo(canvas, minScale);
// No-op zoom to trigger the zoom handler.
else zoom.transform(canvas, d3.zoomTransform(canvas));
return canvas.node();
}
image = {
const img = new Image;
//img.crossOrigin = true; // Only need if we read from the target canvas.
img.src = imageSource;
await img.decode();
return img;
}
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.
