map = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const tiler = d3.tile()
.extent([[0, 0], [width, height]]);
const zoom = d3.zoom()
.scaleExtent([1 << 8, 1 << 22])
.extent([[0, 0], [width, height]])
.on("zoom", (event) => zoomed(event.transform));
const tileGroup = svg.append("g")
.attr("pointer-events", "none")
.attr("font-family", "var(--sans-serif)")
.attr("font-size", 16);
let tile = tileGroup.selectAll("g");
svg
.call(zoom)
.call(zoom.transform, d3.zoomIdentity
.translate(width >> 1, height >> 1)
.scale(1 << 10));
function zoomed(transform) {
const tiles = tiler(transform);
tileGroup.attr("transform", `
scale(${tiles.scale})
translate(${tiles.translate.join(",")})
`);
tile = tile.data(tiles, d => d).join(
enter => enter.append("g")
.attr("transform", ([x, y]) => `translate(${x}, ${y}) scale(${1 / 256})`)
.call(g => g.append("rect")
.attr("fill", d => d3.interpolateRainbow(hilbert(...d)))
.attr("fill-opacity", 0.5)
.attr("stroke", "black")
.attr("width", 256)
.attr("height", 256))
.call(g => g.append("text")
.attr("x", "0.4em")
.attr("y", "1.2em")
.text(d => d.join("/")))
);
}
return svg.node();
}
function hilbert(x, y, z) {
let n = 1 << z, rx, ry, s, d = 0;
for (s = n >> 1; s > 0; s >>= 1) {
rx = (x & s) > 0;
ry = (y & s) > 0;
d += s * s * ((3 * rx) ^ ry);
[x, y] = rot(n, x, y, rx, ry);
}
return d / (1 << z * 2);
}
function rot(n, x, y, rx, ry) {
if (!ry) {
if (rx) {
x = n - 1 - x;
y = n - 1 - y;
}
return [y, x];
}
return [x, y];
}
height = 600
d3 = require("d3@7", "d3-tile@1")
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.
