The end-to-end solution for building and hosting better data apps, dashboards, and reports.
viewof enableZoom = Inputs.toggle({label: "Enable zoom", value: true})
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")
.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
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];
// }
if (enableZoom) {
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(
"transform",
`translate(${event.subject.x}, ${event.subject.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.
