Public
Edited
Nov 16, 2022
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
]);
const g = svg.append("g").attr("cursor", "grab");
g.append("path").attr(
"d",
d3.line().curve(d3.curveLinearClosed)([
[100, 0],
[0, 100],
[-100, 0],
[0, -100]
])
);
g.append("path")
.attr(
"d",
d3.line().curve(d3.curveLinearClosed)([
[400, 0],
[0, 400],
[-400, 0],
[0, -400]
])
)
.style("fill", "none")
.style("stroke", "black");
// zoom
g.call(
d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended)
);
// 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, 8])
.on("zoom", zoomed)
);
function dragstarted() {
d3.select(this).raise();
g.attr("cursor", "grabbing");
}
function dragged(event, d) {
d3.select(this)
.attr("cx", (d.x = event.x))
.attr("cy", (d.y = event.y));
}
function dragended() {
g.attr("cursor", "grab");
}
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.
