{
var margin = { top: -5, right: -5, bottom: -5, left: -5 },
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var zoom = d3
.zoom()
.center([width / 2, height / 2])
.scaleExtent([1, 10])
.on("zoom", zoomed);
var svg = d3
.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom),
g = svg
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.right + ")")
.call(zoom);
var rect = g
.append("rect")
.attr("width", width)
.attr("height", height)
.style("fill", "white")
.style("pointer-events", "all");
var container = g.append("g");
container
.append("g")
.attr("class", "axis")
.selectAll("circle")
.data(d3.range(10, width, 10))
.enter()
.append("circle")
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("r", d => d);
var center = g
.append("circle")
.style("fill", "red")
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("r", 10);
function zoomed(event) {
console.warn(event.transform);
container.attr(
"transform",
"translate(" +
[event.transform.x, event.transform.y] +
")scale(" +
event.transform.k +
")"
);
}
return svg.node();
}
d3 = require("d3@7", await FileAttachment("d3-zoom.min.js").url())
html`
<style>
.axis {
fill: none;
stroke: #aaa;
stroke-width: 1.5px;
}
</style>
`
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.
