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");
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");
svg.call(
d3
.zoom()
.extent([
[0, 0],
[w, w]
])
.scaleExtent([1, 1])
.on("zoom", zoomed)
);
function zoomed({ transform }) {
g.attr("transform", transform);
}
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.
