Public
Edited
Nov 17, 2022
viewof enableZoom = Inputs.toggle({ label: "Enable zoom", value: false })
chart = {
const w = 800;
const svg = d3
.create("svg")
.attr("viewBox", [
((1 / zoom) * -w) / 2,
((1 / zoom) * -w) / 2,
(1 / zoom) * w,
(1 / zoom) * w
])
.attr("cursor", "grab");
const g = svg.append("g").attr("transform", "translate(0, 0)");
g.append("path")
.attr(
"d",
d3.line().curve(d3.curveLinearClosed)([
[400, 0],
[0, 400],
[-400, 0],
[0, -400]
])
)
.style("fill", "white")
.style("stroke", "black")
.style("pointer-events", "none");
g.append("path")
.attr(
"d",
d3.line().curve(d3.curveLinearClosed)([
[100, 0],
[0, 100],
[-100, 0],
[0, -100]
])
)
.style("pointer-events", "none");
// zoom
// zooming + pan;
// function autoBox() {
// document.body.appendChild(this);
// const { x, y, width, height } = this.getBBox();
// document.body.removeChild(this);
// return [x, y, width, height];
// }
svg.call(
d3
.zoom()
.extent([
[0, 0],
[w, w]
])
.scaleExtent([1, enableZoom ? 8 : 1])
.on("zoom", zoomed)
);
function zoomed({ transform }) {
g.attr("transform", transform);
}
// return svg.attr("viewBox", autoBox).node();
return svg.node();
}
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.
