30:T596,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(); }31:[] 2e:{"title":"Zoomable Tiles","cells":[{"id":0,"value":"md`# Zoomable Tiles\n\nThis notebook shows the tile coordinates *x*/*y*/*z* generated by [d3-tile](https://github.com/d3/d3-tile), with [d3-zoom](https://github.com/d3/d3-zoom) for panning and zooming.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"function hilbert(x, y, z) {\n let n = 1 << z, rx, ry, s, d = 0;\n for (s = n >> 1; s > 0; s >>= 1) {\n rx = (x & s) > 0;\n ry = (y & s) > 0;\n d += s * s * ((3 * rx) ^ ry);\n [x, y] = rot(n, x, y, rx, ry);\n }\n return d / (1 << z * 2);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"function rot(n, x, y, rx, ry) {\n if (!ry) {\n if (rx) {\n x = n - 1 - x;\n y = n - 1 - y;\n }\n return [y, x];\n }\n return [x, y];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@7\", \"d3-tile@1\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}