DataViz, Dashboard, Observable Ambassador and Notion Certified
image = zoomable("https://images.unsplash.com/photo-1563305157-a68b080cc7e7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3934&q=80") //zoomable("https://photos.macwright.org/2019-05-15-sweet-fennel_1280.jpg")
function zoom(sel) {
const zoomBehaviour = d3.zoom()
//.filter(() => d3.event.shiftKey)
.on('zoom', zoomed)
sel.call(zoomBehaviour);
}
function zoomed() {
const t = d3.event.transform
const context = d3.select('canvas').node().getContext('2d');
context.save();
context.clearRect(0,0,size.width,size.height)
context.translate(t.x, t.y);
context.scale(t.k, t.k);
context.drawImage(image, 0, 0);
context.restore()
}
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.
