Published
Edited
May 16, 2019
Importers
3 stars
Insert cell
Insert cell
zoomable("https://photos.macwright.org/2019-05-15-sweet-fennel_1280.jpg")
Insert cell
zoomable = url => {
const img = html`<img style='cursor:zoom-in;transition:all 100ms ease-in;max-width: 640px;width:100%;border:1px solid #eee;border-radius:2px;' src='${url}' />`;
img.onclick = () => {
const zoomed = img.style.maxWidth === "640px";

img.style.maxWidth = zoomed ? "" : "640px";
img.style.cursor = zoomed ? "zoom-in" : "zoom-out";
};
return img;
}
Insert cell

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.
Learn more