34:["$","title",null,{"children":"Day 14: Borgesian map | Xavier Olive | Observable"}] 3c:T4a0,**How it is made.** Five plans are drawn, each four times closer than the one before and all centred on the same point of the gallery: 3,200 m, 800 m, 200 m, 50 m and 12.5 m across. The plan on the table is the first one again, at 1:1024 (it is 3.125 m wide), so the series loops; a WebGL shader reads each pixel in the finest plan that contains it, and fades one plan into the next near its edge. The plans are aligned with the façade of the Capitole: north is 9° left of up. **What is real, what is not.** The city is real: buildings from the cadastre, water, parks, bridges and trees from OpenStreetMap. So is the Occitan cross of the square (Raymond Moretti, 1995), drawn at its size from a photograph taken from above. The inside of the Capitole is a reconstruction: no plan of its first floor is published, so the Salle des Illustres (60 m by 8.7 m) is placed between the façade and the courtyards, on the axis of the Cour Henri-IV, with its windows, busts and parquet drawn from descriptions. The table, its plan and the people around it are invented. **Sources.** Cadastre (Etalab, commune of Toulouse); © OpenStreetMap contributors; Capitole outline from OpenStreetMap.3d:T2a12,// Day 14, Borgesian map: a plan of Toulouse so detailed that it holds, on a table of the Salle des Illustres, the // plan of Toulouse. Five nested plans (each four times closer, all centred on the same point of the gallery) make one // image that contains itself 1024 times smaller; the view only moves closer, for ever. // borgesMap(plans, {invalidation}): plans = the five images L0..L4 (square, same size), from the widest to the closest. function borgesMap(plans, {invalidation} = {}) { const WIDTHS = [3200, 800, 200, 50, 12.5], RATIO = 1024, H0 = WIDTHS[0] / 2; const uid = Math.random().toString(36).slice(2, 8); const INK = "#1d1b18", PAPER = "#f3eee2"; const root = document.createElement("div"); root.className = `borges-${uid}`; root.innerHTML = ``; const canvas = document.createElement("canvas"); canvas.setAttribute("role", "img"); canvas.setAttribute("aria-label", "A plan of Toulouse that zooms without end: the city, the Capitole, the Salle des Illustres, and on its floor the same plan of the city"); root.append(canvas); // const read = document.createElement("div"); read.className = "read"; root.append(read); const bar = document.createElement("div"); bar.className = "bar"; bar.innerHTML = `scroll, pinch or drag up and down`; root.append(bar); const play = bar.querySelector(".play"), dir = bar.querySelector(".dir"); const gl = canvas.getContext("webgl2", {antialias: false, alpha: false}); if (!gl) { root.innerHTML += `

This map needs WebGL 2, which this browser does not provide.

`; return root; } // ── the five plans, as the layers of one texture, with their reductions ── const small = Math.min(window.screen.width, window.screen.height) < 700; // phones: a quarter of the memory const N = Math.min(plans[0].naturalWidth || plans[0].width, small ? 2048 : 4096, gl.getParameter(gl.MAX_TEXTURE_SIZE)); const tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D_ARRAY, tex); gl.texStorage3D(gl.TEXTURE_2D_ARRAY, Math.floor(Math.log2(N)) + 1, gl.R8, N, N, plans.length); gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1); const scratch = document.createElement("canvas"); scratch.width = scratch.height = N; const sctx = scratch.getContext("2d", {willReadFrequently: true}); plans.forEach((img, i) => { sctx.drawImage(img, 0, 0, N, N); const rgba = sctx.getImageData(0, 0, N, N).data, grey = new Uint8Array(N * N); for (let k = 0; k < grey.length; k++) grey[k] = rgba[4 * k]; gl.texSubImage3D(gl.TEXTURE_2D_ARRAY, 0, 0, 0, i, N, N, 1, gl.RED, gl.UNSIGNED_BYTE, grey); }); gl.generateMipmap(gl.TEXTURE_2D_ARRAY); gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR); gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); const compile = (type, src) => { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s)); return s; }; const program = gl.createProgram(); gl.attachShader(program, compile(gl.VERTEX_SHADER, `#version 300 es in vec2 p; void main() { gl_Position = vec4(p, 0.0, 1.0); }`)); gl.attachShader(program, compile(gl.FRAGMENT_SHADER, `#version 300 es precision highp float; precision highp sampler2DArray; uniform sampler2DArray plans; uniform vec2 size; // of the canvas, in pixels uniform float half_; // metres from the centre to the top of the view uniform vec3 ink, paper; out vec4 colour; const float H0 = ${H0.toFixed(1)}, RATIO = ${RATIO.toFixed(1)}, STEP = ${(WIDTHS[0] / WIDTHS[1]).toFixed(1)}, N = ${N.toFixed(1)}; const int LAST = ${plans.length - 1}; // plan i at z (metres from the centre), for a pixel pix metres wide: the reduction that matches is chosen here, // because z jumps where the image wraps and the usual estimate of the pixel's size would fail there float plan(int i, vec2 z, float pix) { float W = 2.0 * H0 / pow(STEP, float(i)); return textureLod(plans, vec3(z.x / W + 0.5, 0.5 - z.y / W, float(i)), log2(max(pix / W * N, 1e-6))).r; } // the image that contains itself: z is brought into the ring between the edge of the city plan and the edge of // the map on the floor, then read in the finest plan that holds it; near its edge, a plan fades into the coarser float image(vec2 z, float pix) { float m = max(max(abs(z.x), abs(z.y)), 1e-20); float f = pow(RATIO, -ceil(log(m / H0) / log(RATIO))); z *= f; pix *= f; m *= f; int i = int(clamp(floor(log(H0 / m) / log(STEP) + 1e-4), 0.0, float(LAST))); float fine = plan(i, z, pix); if (i > 0) { float H = H0 / pow(STEP, float(i)); fine = mix(plan(i - 1, z, pix), fine, smoothstep(0.0, 1.0, (H - m) / (0.2 * H))); } return fine; } void main() { float pix = 2.0 * half_ / size.y; vec2 z = (gl_FragCoord.xy - 0.5 * size) * pix; colour = vec4(mix(ink, paper, image(z, pix)), 1.0); }`)); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(program)); gl.useProgram(program); const quad = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, quad); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW); const loc = gl.getAttribLocation(program, "p"); gl.enableVertexAttribArray(loc); gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0); const U = (name) => gl.getUniformLocation(program, name); const rgb = (hex) => [1, 3, 5].map((k) => parseInt(hex.slice(k, k + 2), 16) / 255); gl.uniform1i(U("plans"), 0); gl.uniform3fv(U("ink"), rgb(INK)); gl.uniform3fv(U("paper"), rgb(PAPER)); // ── the view: depth counts the loops (0 = the whole city plan, 1 = the same plan again, on the table) ── let depth = 0, playing = !window.matchMedia?.("(prefers-reduced-motion: reduce)").matches, sense = 1, dirty = true, w = 0, h = 0; const LOOP = 48000; // milliseconds for one loop when playing const metres = (m) => (m >= 1000 ? `${(m / 1000).toFixed(1)} km` : m >= 10 ? `${Math.round(m)} m` : `${m.toFixed(1)} m`); const layout = () => { w = root.clientWidth; if (!w) return; h = Math.round(Math.min(w * 0.66, 760)); const dpr = Math.min(2, window.devicePixelRatio || 1); canvas.width = Math.round(w * dpr); canvas.height = Math.round(h * dpr); canvas.style.height = `${h}px`; gl.viewport(0, 0, canvas.width, canvas.height); dirty = true; }; const ro = new ResizeObserver(layout); ro.observe(root); const draw = () => { const frac = depth - Math.floor(depth), maps = Math.floor(depth); const half = H0 * 0.98 * RATIO ** -frac; // on the ground of the map being looked at gl.uniform2f(U("size"), canvas.width, canvas.height); gl.uniform1f(U("half_"), half); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); /* const across = 2 * half * (w / h); const scale = maps === 0 ? "the territory itself" : maps === 1 ? "a map at 1 : 1024" : `a map of a map${maps > 2 ? ` (×${maps - 1})` : ""}, at 1 : 1024${maps > 1 ? `^${maps}` : ""}`; read.innerHTML = `${metres(across)} across · ${scale}`; */ }; const move = (d) => { depth = Math.max(0, depth + d); dirty = true; }; const stop = () => { playing = false; play.textContent = "▶"; play.setAttribute("aria-label", "Play"); }; canvas.addEventListener("wheel", (ev) => { ev.preventDefault(); stop(); move(-ev.deltaY * (ev.ctrlKey ? 0.004 : 0.0007)); }, {passive: false}); const pointers = new Map(); let pinch = 0; canvas.addEventListener("pointerdown", (ev) => { canvas.setPointerCapture(ev.pointerId); pointers.set(ev.pointerId, [ev.clientX, ev.clientY]); pinch = 0; }); canvas.addEventListener("pointermove", (ev) => { if (!pointers.has(ev.pointerId)) return; const before = pointers.get(ev.pointerId); pointers.set(ev.pointerId, [ev.clientX, ev.clientY]); if (pointers.size === 1) { stop(); move((before[1] - ev.clientY) * 0.0016); } // drag up: closer else if (pointers.size === 2) { const [a, b] = [...pointers.values()], dist = Math.hypot(a[0] - b[0], a[1] - b[1]); if (pinch) { stop(); move(Math.log(dist / pinch) / Math.log(RATIO)); } pinch = dist; } }); for (const type of ["pointerup", "pointercancel"]) canvas.addEventListener(type, (ev) => { pointers.delete(ev.pointerId); pinch = 0; }); play.addEventListener("click", () => { playing = !playing; play.textContent = playing ? "❚❚" : "▶"; play.setAttribute("aria-label", playing ? "Pause" : "Play"); }); dir.addEventListener("click", () => { sense = -sense; dir.textContent = sense > 0 ? "in ↓" : "out ↑"; }); if (!playing) stop(); let frame, t0 = performance.now(); const tick = (t) => { const dt = Math.min(100, t - t0); t0 = t; if (playing) { move(sense * dt / LOOP); if (depth === 0 && sense < 0) { sense = 1; dir.textContent = "in ↓"; } } if (w && dirty) { draw(); dirty = false; } frame = requestAnimationFrame(tick); }; frame = requestAnimationFrame(tick); invalidation?.then(() => { cancelAnimationFrame(frame); ro.disconnect(); gl.getExtension("WEBGL_lose_context")?.loseContext(); }); root.depth = (d) => { if (d !== undefined) { stop(); depth = d; dirty = true; } return depth; }; // for tests return root; }3e:[{"id":"0f9b94f818220e08365d7c9ed11fc3985e6ef2318c1a38af43e7fc150b1e7ecefff26cde828f569e5e63a2683b3d5f0d382c99ded1b97b0c52447c2f8886a1d3","href":"https://static.observableusercontent.com/files/0f9b94f818220e08365d7c9ed11fc3985e6ef2318c1a38af43e7fc150b1e7ecefff26cde828f569e5e63a2683b3d5f0d382c99ded1b97b0c52447c2f8886a1d3","name":"L0.png","type":"image/png","lastModified":1794306123459,"size":4063613},{"id":"f9bc82ec85e87e538ea8d35520098b4727fc2242a7402f719992254a4bdca8c419d50708c79a8c4e00ba70801dd6c4e3dc4be6f7511af15636296c8a3f37c3e4","href":"https://static.observableusercontent.com/files/f9bc82ec85e87e538ea8d35520098b4727fc2242a7402f719992254a4bdca8c419d50708c79a8c4e00ba70801dd6c4e3dc4be6f7511af15636296c8a3f37c3e4","name":"L1.png","type":"image/png","lastModified":1794306123473,"size":1673896},{"id":"d44903634864dc3ea1e35e5ee649072080e8720704f0f1dd77fd68af7289b90e0188b7494a821b3653f6e8b6d15a5752cf71b46f9996765a32788aea1b320233","href":"https://static.observableusercontent.com/files/d44903634864dc3ea1e35e5ee649072080e8720704f0f1dd77fd68af7289b90e0188b7494a821b3653f6e8b6d15a5752cf71b46f9996765a32788aea1b320233","name":"L2.png","type":"image/png","lastModified":1794306123474,"size":410980},{"id":"42660ec43686cee35e64614cd0615aed9cf1a5147e6147a908d8c266c8230495f9fea9932f2ffb7cc5400dd0fdfc9ecb8dea951551ed492145d5d5ed0edc2d63","href":"https://static.observableusercontent.com/files/42660ec43686cee35e64614cd0615aed9cf1a5147e6147a908d8c266c8230495f9fea9932f2ffb7cc5400dd0fdfc9ecb8dea951551ed492145d5d5ed0edc2d63","name":"L3.png","type":"image/png","lastModified":1794306123475,"size":436576},{"id":"0ef703f20e88cb40976e4a594b340462d12a2b847327397143e56aebb136bde991333222e1f816bc732dd19e6c294741b17507e0e2cfaa362eccc62a8652c23d","href":"https://static.observableusercontent.com/files/0ef703f20e88cb40976e4a594b340462d12a2b847327397143e56aebb136bde991333222e1f816bc732dd19e6c294741b17507e0e2cfaa362eccc62a8652c23d","name":"L4.png","type":"image/png","lastModified":1794306123481,"size":1066728}] 38:{"id":"588e2aca554590ac","slug":"30-day-map-challenge-2026-day-14-borgesian-map","title":"Day 14: Borgesian map","thumbnail":"7ae67ee073743fe86f74933e3827664498848bb0d1f2c733aeaa5a2ecbc453a6","access_level":"public","create_time":"$D2026-11-10T10:01:45.653Z","update_time":"$D2026-11-10T20:45:49.084Z","view_time":null,"first_public_time":"$D2026-11-14T07:02:54.070Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6b95df6ccdd0cd40","login":"xoolive","name":"Xavier Olive","avatar_url":"https://avatars-next.observableusercontent.com/e055a445877c5a8ee2da134a257760536c2d1ee2fcd43f3aaf3f40db54e13733","tier":"starter_2024","bio":"Research scientist. I like maps, code and data visualisation. I keep an eye on anything that can fly, an ear for fipradio and a foot ready for next trail.","followed_by_you":false,"follows_you":false},"version":32,"publish_version":32,"role":null,"authored":false,"authors":[{"type":"individual","id":"0b2e8d88aeec5ab4","login":"xoolive","name":"Xavier Olive","avatar_url":"https://avatars-next.observableusercontent.com/e055a445877c5a8ee2da134a257760536c2d1ee2fcd43f3aaf3f40db54e13733","tier":null,"bio":"Research scientist. I like maps, code and data visualisation. I keep an eye on anything that can fly, an ear for fipradio and a foot ready for next trail.","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"6b95df6ccdd0cd40","login":"xoolive","name":"Xavier Olive","avatar_url":"https://avatars-next.observableusercontent.com/e055a445877c5a8ee2da134a257760536c2d1ee2fcd43f3aaf3f40db54e13733","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"a749676c7f0928cb","slug":"30-day-map-challenge","title":"30 day map challenge","owner":{"id":"6b95df6ccdd0cd40","login":"xoolive","name":"Xavier Olive"}},"type":"notebook","body":{"titling":"auto","title":"Day 14: Borgesian map","cells":[{"id":1,"value":"$${nav(14)}\n\n# Day 14: Borgesian map\n\nIn a one-paragraph story, *On Exactitude in Science*, Borges imagines cartographers so exacting that they draw a map of the Empire on the scale of the Empire itself. Here is a smaller folly: a plan of Toulouse detailed enough to show the Capitole, its Salle des Illustres, and the table on which the city keeps a plan of Toulouse, itself detailed enough to show the Capitole, the room, the table… Scroll, pinch or drag up and down over the map, or press play: the plan never ends.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"map = borgesMap(plans, {invalidation})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$3c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import {nav} from \"@xoolive/30-day-map-challenge-2026-day-1-points\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"plans = Promise.all([FileAttachment(\"L0.png\").image(), FileAttachment(\"L1.png\").image(), FileAttachment(\"L2.png\").image(), FileAttachment(\"L3.png\").image(), FileAttachment(\"L4.png\").image()])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"2"}} 33:null