Published
Edited
Oct 5, 2019
1 fork
8 stars
visual = {
const canvas = DOM.canvas(w, h);
const context = canvas.getContext('2d');
d3.select(canvas).call(zoom);
context.beginPath();
context.arc(w/2, h/2, h/4, 0, 2 * Math.PI);
context.stroke();
return canvas;
}
function zoom(sel) {
const context = sel.node().getContext('2d');
const zoomBehaviour = d3.zoom().on('zoom', zoomed);
sel.call(zoomBehaviour);
function zoomed() {
const t = d3.event.transform;
context.save();
context.clearRect(0, 0, w, h);
context.translate(t.x, t.y);
context.scale(t.k, t.k);
context.beginPath(); // Comment this out for art's sake.
context.arc(w / 2, h / 2, h / 4, 0, 2 * Math.PI);
context.stroke();
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.
