2c:null 2d:["$","title",null,{"children":"Zoomable Tiles | D3 | Observable"}] 32: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(); }33:[] 30:{"id":"c8f64263e30ba1d6","slug":"zoomable-tiles","title":"Zoomable Tiles","thumbnail":"1a85ea1a39f567bf0348de7dbd04b80a0ed1e61fec6f09843bc55e86f15fc42d","access_level":"public","create_time":"$D2019-07-25T18:43:53.704Z","update_time":"$D2022-12-14T09:44:24.979Z","view_time":null,"first_public_time":"$D2019-07-25T19:07:56.883Z","fork":{"id":"67dace0aba1409c7","slug":"zoomable-map-tiles","title":"Zoomable Map Tiles","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":39,"starred":false,"owner":{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024"},"version":233,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":30,"collection":{"id":"271c421a5537aab2","slug":"d3-tile","title":"d3-tile","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined"},{"id":6,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":8,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"d3 = require(\"d3@7\", \"d3-tile@1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"