map = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("id", "map");
const tile = d3
.tile()
.extent([[0, 0], [width, height]])
.tileSize(256)
.clampX(false);
const zoom = d3
.zoom()
.scaleExtent([1 << 8, 1 << 25])
.extent([[0, 0], [width, height]])
.on("zoom", () => zoomed(d3.event.transform));
const levels = svg
.append("g")
.attr("pointer-events", "none")
.selectAll("g")
.data(deltas)
.join("g");
svg.call(zoom).call(zoom.transform, transform);
function zoomed(t) {
transform.x = t.x;
transform.y = t.y;
transform.k = t.k;
levels.each(function(delta) {
const tiles = tile.zoomDelta(delta)(transform);
d3.select(this)
.selectAll("image")
.data(tiles, d => d)
.join("image")
.attr("xlink:href", d => url(...d3.tileWrap(d)))
.attr("x", ([x]) => (x + tiles.translate[0]) * tiles.scale)
.attr("y", ([, y]) => (y + tiles.translate[1]) * tiles.scale)
.attr("width", tiles.scale)
.attr("height", tiles.scale);
});
}
return svg.node();
}
deltas = [-100, -4, -1, 0]
transform = {
return this || d3.zoomIdentity.translate(width >> 1, height >> 1).scale(1 << 12);
}
url = (x, y, z) => `https://tile.opentopomap.org/${z}/${x}/${y}.png`
height = Math.ceil((width * screen.height) / screen.width)
d3 = require("d3@5", "d3-tile@1")
import { fullscreen } from "@fil/fullscreen"
fullscreen(map, { center: false })
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.
