43:["$","title",null,{"children":"Day 8: Utopia | Xavier Olive | Observable"}] 4b:T727,**How the clouds work.** The clouds are computed again at every frame, on a coarse grid (one cell for every 5 map pixels, about 360 × 228 cells), then drawn on a canvas stretched over the map: the browser smooths them while scaling up, which makes them soft at no cost. - *Noise.* Two tileable textures of fractal value noise (random values on a grid, smoothly interpolated, summed over three or four octaves, each twice as fine and half as strong as the previous one) drift at different speeds and in different directions: slow banks and faster wisps. Their weighted sum gives a density between 0 and 1. - *Clearings.* Each utopia digs a Gaussian hole into that density. Its width comes from the vagueness of the place: a circle of that many degrees around the believed position, once projected, gives the spread (at least 16 pixels, so that Kitezh's lake still shows). The clearing of the current card grows almost twice as wide, and all of them breathe slowly, by ±8%, each at its own pace. - *Edges.* The opacity is a smoothstep of `noise + 0.22 − 0.9 × min(1, 1.6 × clearing)` between 0.42 and 0.62, so the clouds part along the ragged contours of the noise rather than in circles; the thickest clouds are shaded slightly grey underneath. - *Beyond the map.* The cloud canvas reaches 25% past the map on every side, so the camera never shows a clear edge. - *Camera.* Each card has a view (a centre and a width). The scroll position is eased, then interpolated with `d3.interpolateZoom`, which zooms out and back in between distant places. The map (SVG) and the clouds (canvas) move together under one CSS transform, while the names are placed again in screen space at each frame, so they keep their size. The map uses Jacques Bertin's projection of 1953 (d3-geo-projection) and the Natural Earth coastlines at 1:110m.4c:T3801,// Day 8, Utopia: a voyage through twelve utopias, in order of date, on a world map (Bertin 1953) under drifting // clouds. The frame scrolls inside itself: the map stays in place while the cards pass over it, and the camera // glides from one utopia to the next. The cloud density is a drifting fractal noise minus a "clearing" around // each utopia, as wide as the place is vague, and wider for the utopia of the current card. // utopiaVoyage(data, land, {d3geo, images, invalidation}): data = utopias.json, land = world-atlas land (GeoJSON), // d3geo = d3-geo-projection, images = {id: url}, invalidation = a promise that stops the animation. function utopiaVoyage(data, land, {d3geo, images = {}, invalidation} = {}) { const utopias = [...data.utopias].sort((a, b) => a.sort - b.sort); const W = 1200, H = 760; // the clouds cover the whole frame, beyond the map: a canvas padded by PAD on each side, computed on a 1/S grid const PAD = 0.25, CW = W * (1 + 2 * PAD), CH = H * (1 + 2 * PAD), S = 5, w = Math.ceil(CW / S), h = Math.ceil(CH / S); const gx = (x) => (x + PAD * W) / S, gy = (y) => (y + PAD * H) / S; // map units to the cloud grid const projection = d3geo.geoBertin1953().fitExtent([[10, 10], [W - 10, H - 10]], {type: "Sphere"}); const path = d3.geoPath(projection); const uid = Math.random().toString(36).slice(2, 8); // ── type: EB Garamond for Latin and Cyrillic, a Noto face for each other script ── const LATIN = "'EB Garamond', serif"; const SCRIPT = { taohuayuan: ["'Noto Serif TC', serif", 15], ryugu: ["'Noto Serif JP', serif", 15], shambhala: ["'Noto Serif Tibetan', serif", 17], uttarakuru: ["'Noto Serif Devanagari', serif", 17], aaru: ["'Noto Sans Egyptian Hieroglyphs', sans-serif", 20], }; const LABEL = {aaru: [-8, 4, "end"]}; // where names would collide: [dx, dy, anchor] // ── noise ── const noiseTile = (tw, th, cells, seed) => { // tileable fractal value noise in [0, 1] let s = seed; const rnd = () => ((s = (s * 16807) % 2147483647) / 2147483647); const out = new Float32Array(tw * th); let tot = 0; for (const [cell, a] of cells) { const gw = Math.round(tw / cell), gh = Math.round(th / cell), g = Float32Array.from({length: gw * gh}, rnd); for (let y = 0; y < th; y++) for (let x = 0; x < tw; x++) { const fx = x / tw * gw, fy = y / th * gh, x0 = Math.floor(fx), y0 = Math.floor(fy), tx = fx - x0, ty = fy - y0; const sx = tx * tx * (3 - 2 * tx), sy = ty * ty * (3 - 2 * ty), x1 = (x0 + 1) % gw, y1 = (y0 + 1) % gh; out[y * tw + x] += a * ((g[y0 * gw + x0] * (1 - sx) + g[y0 * gw + x1] * sx) * (1 - sy) + (g[y1 * gw + x0] * (1 - sx) + g[y1 * gw + x1] * sx) * sy); } tot += a; } return {w: tw, h: th, v: out.map((x) => x / tot)}; }; const sample = ({w: tw, h: th, v}, x, y) => { // bilinear, wrapping x = ((x % tw) + tw) % tw; y = ((y % th) + th) % th; const x0 = Math.floor(x), y0 = Math.floor(y), tx = x - x0, ty = y - y0, x1 = (x0 + 1) % tw, y1 = (y0 + 1) % th; return (v[y0 * tw + x0] * (1 - tx) + v[y0 * tw + x1] * tx) * (1 - ty) + (v[y1 * tw + x0] * (1 - tx) + v[y1 * tw + x1] * tx) * ty; }; const smooth = (a, b, x) => { const t = Math.min(1, Math.max(0, (x - a) / (b - a))); return t * t * (3 - 2 * t); }; // ── frame: an inner scroll; the stage sticks while the steps pass ── const root = document.createElement("div"); root.className = `voyage-${uid}`; root.innerHTML = ``; const stage = document.createElement("div"); stage.className = "stage"; root.append(stage); const world = document.createElement("div"); world.className = "world"; stage.append(world); const svg = d3.select(world).append("svg").attr("viewBox", [0, 0, W, H]); svg.append("path").attr("d", path({type: "Sphere"})).attr("fill", "#c9d6d4"); svg.append("path").attr("d", path(d3.geoGraticule10())).attr("fill", "none").attr("stroke", "#8a9a98").attr("stroke-width", 0.4).attr("opacity", 0.6); svg.append("path").attr("d", path(land)).attr("fill", "#e8dcbc").attr("stroke", "#6b5a40").attr("stroke-width", 0.5).attr("vector-effect", "non-scaling-stroke"); const circle = (u) => d3.geoCircle().center(u.believed_at).radius(Math.max(u.vagueness, 1.5))(); svg.append("defs").append("filter").attr("id", `soft-${uid}`).attr("x", "-50%").attr("y", "-50%").attr("width", "200%").attr("height", "200%") .append("feGaussianBlur").attr("stdDeviation", 6); svg.append("g").selectAll("path").data(utopias).join("path").attr("d", (u) => path(circle(u))) .attr("fill", "#d9a441").attr("opacity", 0.5).attr("filter", `url(#soft-${uid})`); const canvas = document.createElement("canvas"); canvas.width = Math.round(CW); canvas.height = Math.round(CH); world.append(canvas); // labels in screen space, so they keep their size when the camera zooms const labels = d3.select(stage).append("svg").attr("class", "labels"); const labelNodes = utopias.map((u) => { const [dx, dy, anchor] = LABEL[u.id] ?? [0, 0, "middle"], [face, size] = SCRIPT[u.id] ?? [LATIN, 16]; const t = labels.append("text").attr("text-anchor", anchor).attr("fill", "#3b2a18"); const a = t.append("tspan").attr("font-family", face).attr("font-size", size).attr("font-style", face === LATIN ? "italic" : "normal").text(u.name); const b = u.translit ? t.append("tspan").attr("dy", 13).attr("font-family", LATIN).attr("font-size", 11).text(u.translit) : null; return {u, t, a, b, dx, dy, p: projection(u.believed_at)}; }); const when = document.createElement("div"); when.className = "when"; stage.append(when); // ── steps: introduction, the ten utopias, back to the world ── const esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({"&": "&", "<": "<", ">": ">", '"': """})[c]); const steps = [ {low: true, html: `

Twelve utopias

Every age has dreamed of a better place somewhere else: a garden at the beginning of time, a kingdom behind the mountains, an island beyond the sea. Here are twelve of them, from Egypt to Tonga, in the order they were first recorded, each placed where it was said to lie. The clouds part over them, as widely as each place is vague.

Scroll ↓

`}, ...utopias.map((u) => { const [face] = SCRIPT[u.id] ?? [LATIN], im = u.image; return {u, html: `

${esc(u.when)}

${esc(u.name)}

${u.translit ? `

${esc(u.translit)}

` : ""}

${esc(u.en)}, ${esc(u.culture)}

${images[u.id] ? `

` : ""}

${esc(u.story)}

From ${esc(u.source.text)}${u.source.author && u.source.author !== "anonymous" ? `, ${esc(u.source.author)}` : ""}. Image: ${esc(im.title)}, ${esc(im.artist)}, ${esc(im.date)} (${esc(im.credit)}; ${esc(im.licence)}).

`}; }), {low: true, html: `

Nowhere, everywhere

Thomas More's word says it twice over: ou-topos, no place, and eu-topos, the good place. Some of these lands were looked for, by pilgrims at Lake Svetloyar, by sailors to the west of Ireland. Most were never meant to be found.

`}, ]; const stepNodes = steps.map((s) => { const el = document.createElement("div"); el.className = s.low ? "step low" : "step"; el.innerHTML = `

${s.html}

`; root.append(el); return el; }); // ── camera: a view [cx, cy, width] in map units for each step ── const full = [W / 2, H / 2, 0.95 * W]; // the whole world, the card in the empty south-east const viewOf = (u) => { const [x, y] = projection(u.believed_at), k = Math.min(2.4, Math.max(1.5, 2.7 - u.vagueness / 8)), vw = W / k; return [x + 0.2 * vw, y, vw]; // the utopia sits left of centre, the card on the right }; const views = [full, ...utopias.map(viewOf), full]; // ── clouds ── const clearings = utopias.map((u, i) => { const [x, y] = projection(u.believed_at), [[x0, y0], [x1, y1]] = path.bounds(circle(u)); const sigma = Math.max(16, (x1 - x0 + y1 - y0) / 4) * 0.75 / S, f = new Float32Array(w * h); for (let j = 0; j < h; j++) for (let k = 0; k < w; k++) f[j * w + k] = Math.exp(-((k - gx(x)) ** 2 + (j - gy(y)) ** 2) / (2 * sigma * sigma)); return {f, phase: i * 1.9}; }); const A = noiseTile(256, 128, [[32, 1], [16, 0.5], [8, 0.25], [4, 0.12]], 7), vA = [3.2, 0.6]; const B = noiseTile(192, 96, [[24, 1], [12, 0.5], [6, 0.25]], 29), vB = [6.5, -1.4]; const ctx = canvas.getContext("2d"), small = document.createElement("canvas"); small.width = w; small.height = h; const sctx = small.getContext("2d"), img = sctx.createImageData(w, h), field = new Float32Array(w * h); // ── layout ── let sw = 0, sh = 0; const layout = () => { sw = root.clientWidth; if (!sw) return; sh = Math.round(Math.min(sw * H / W, window.innerHeight * 0.85, 760)); root.style.height = `${sh}px`; stage.style.height = `${sh}px`; labels.attr("viewBox", [0, 0, sw, sh]); stepNodes.forEach((el, i) => { el.style.height = `${sh}px`; el.style.marginTop = i === 0 ? `${-sh}px` : "0"; }); }; const ro = new ResizeObserver(layout); ro.observe(root); // ── animation: the camera follows the scroll, the clouds drift ── let frame, pos = 0, t0 = performance.now(); const tick = (now) => { const t = (now - t0) / 1000; if (sw) { const target = Math.min(steps.length - 1, Math.max(0, root.scrollTop / sh)); pos += (target - pos) * 0.12; if (Math.abs(target - pos) < 1e-4) pos = target; const i = Math.min(steps.length - 2, Math.floor(pos)), f = smooth(0.2, 0.8, pos - i); // rest on each step, travel between const [cx, cy, vw] = d3.interpolateZoom(views[i], views[i + 1])(f); const k = Math.max(sw / vw, sh / (vw * H / W)), tx = sw / 2 - cx * k, ty = sh / 2 - cy * k; world.style.transform = `translate(${tx}px, ${ty}px) scale(${k})`; for (const {t: node, a, b, dx, dy, p: [x, y]} of labelNodes) { const X = tx + x * k + dx, Y = ty + y * k + dy; a.attr("x", X).attr("y", Y); if (b) b.attr("x", X); node.attr("opacity", X < -80 || X > sw + 80 || Y < -40 || Y > sh + 40 ? 0 : 1); } const near = Math.round(pos), u = steps[near]?.u; when.textContent = u ? u.when : ""; // clouds: the clearing of the current utopia widens as its card arrives field.fill(0); clearings.forEach(({f: g, phase}, j) => { const focus = Math.max(0, 1 - Math.abs(pos - (j + 1))); const kk = (1 + 0.08 * Math.sin(t * 0.3 + phase)) * (1 + 0.9 * focus); for (let q = 0; q < g.length; q++) field[q] += kk * g[q]; }); const ax = t * vA[0], ay = t * vA[1], bx = t * vB[0], by = t * vB[1], d = img.data; for (let j = 0, q = 0; j < h; j++) for (let x = 0; x < w; x++, q++) { const n = 0.7 * sample(A, x - ax, j - ay) + 0.3 * sample(B, x - bx, j - by); const dens = n + 0.22 - 0.9 * Math.min(1, 1.6 * field[q]); const a = smooth(0.42, 0.62, dens), shade = 248 - 26 * smooth(0.6, 0.95, dens); d[4 * q] = shade; d[4 * q + 1] = shade - 3; d[4 * q + 2] = shade - 9; d[4 * q + 3] = 250 * a; } sctx.putImageData(img, 0, 0); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.imageSmoothingQuality = "high"; ctx.drawImage(small, 0, 0, canvas.width, canvas.height); } frame = requestAnimationFrame(tick); }; frame = requestAnimationFrame(tick); invalidation?.then(() => { cancelAnimationFrame(frame); ro.disconnect(); }); return root; }4d:[{"id":"a0cd667fdf9206e8295d876fe7a450f94709b6b08ed6bb9f4a321eeace571eacbb8f27137410940853cb6560fe131c532fd7eb43d3c89a232e23b50c7aa83a65","href":"https://static.observableusercontent.com/files/a0cd667fdf9206e8295d876fe7a450f94709b6b08ed6bb9f4a321eeace571eacbb8f27137410940853cb6560fe131c532fd7eb43d3c89a232e23b50c7aa83a65","name":"aaru.jpg","type":"image/jpeg","lastModified":1793974882925,"size":290576},{"id":"5140ee5bcb2fb7e9ae599295030599b3592496746b1728d5c8c3435c3ae7b5453a6965675e28e8401ed293fc3f4de46bc7f68b00ada526e54b91fdbbefb47e67","href":"https://static.observableusercontent.com/files/5140ee5bcb2fb7e9ae599295030599b3592496746b1728d5c8c3435c3ae7b5453a6965675e28e8401ed293fc3f4de46bc7f68b00ada526e54b91fdbbefb47e67","name":"taohuayuan.jpg","type":"image/jpeg","lastModified":1793974882926,"size":99781},{"id":"5f74ff49509eb7b0135da2a788d60418324f1bc84f8d24f41cb857a9e6018596b13e926b0006b9dfe115474cfc6b41e21c347a95515353699901e64de757cdf1","href":"https://static.observableusercontent.com/files/5f74ff49509eb7b0135da2a788d60418324f1bc84f8d24f41cb857a9e6018596b13e926b0006b9dfe115474cfc6b41e21c347a95515353699901e64de757cdf1","name":"ryugu.jpg","type":"image/jpeg","lastModified":1793974882929,"size":282388},{"id":"502458c20ef71d1e25a91c3d462fcf383837595c965c04b90a85821eb0a0090e6ccc4bd16ac35e22fb04dcea2e9394e3811da315f92302b68d15c3118b1b2e1a","href":"https://static.observableusercontent.com/files/502458c20ef71d1e25a91c3d462fcf383837595c965c04b90a85821eb0a0090e6ccc4bd16ac35e22fb04dcea2e9394e3811da315f92302b68d15c3118b1b2e1a","name":"shambhala.jpg","type":"image/jpeg","lastModified":1793974882931,"size":998159},{"id":"7aadbe46574eeb3ccb56c62100198a992b2cc1b89a0c0b1e9306f031b7d39d9bc2af3e059625ecaf7b59062460c58d36b8e39faa27e2c4b07664b03e394f3f9e","href":"https://static.observableusercontent.com/files/7aadbe46574eeb3ccb56c62100198a992b2cc1b89a0c0b1e9306f031b7d39d9bc2af3e059625ecaf7b59062460c58d36b8e39faa27e2c4b07664b03e394f3f9e","name":"cocagne.jpg","type":"image/jpeg","lastModified":1793974882932,"size":246961},{"id":"6d3a667f4c7ba373f0a1b1023ae661a8b74c0df8988e7b81f2deb10e24fa5225d82854e2ffe2129a40f4bdc1c1474dc5210838cf8f325df5f2483bec177c402d","href":"https://static.observableusercontent.com/files/6d3a667f4c7ba373f0a1b1023ae661a8b74c0df8988e7b81f2deb10e24fa5225d82854e2ffe2129a40f4bdc1c1474dc5210838cf8f325df5f2483bec177c402d","name":"utopia.jpg","type":"image/jpeg","lastModified":1793974882933,"size":484988},{"id":"5668a53781e62dd14a0f12bb7e1617267a19ba68904f36dd37b33cf5a5fdce89eef2a8355f0ca60c4c91b391625d66818d5d50df4e35d82be030c8edfc0b2d6e","href":"https://static.observableusercontent.com/files/5668a53781e62dd14a0f12bb7e1617267a19ba68904f36dd37b33cf5a5fdce89eef2a8355f0ca60c4c91b391625d66818d5d50df4e35d82be030c8edfc0b2d6e","name":"tirnanog.jpg","type":"image/jpeg","lastModified":1793974882934,"size":249101},{"id":"0f9dd82bfc7d2b349b0e91b9f793409620e721eb378a6f75f568d2aa52cef41211c08776de0261ef33196fb35873e38cd8a44eda6081733f2da1fc72a8281028","href":"https://static.observableusercontent.com/files/0f9dd82bfc7d2b349b0e91b9f793409620e721eb378a6f75f568d2aa52cef41211c08776de0261ef33196fb35873e38cd8a44eda6081733f2da1fc72a8281028","name":"kitezh.jpg","type":"image/jpeg","lastModified":1793974882935,"size":309674},{"id":"80663f5744f5bc6f9f03fde68030b85365844b4f6c99111a75276824d5018d93ec66a0cadcedcc1a924b3f3baf5b6bad7deb27d009a431c99a4e4fac64acfde7","href":"https://static.observableusercontent.com/files/80663f5744f5bc6f9f03fde68030b85365844b4f6c99111a75276824d5018d93ec66a0cadcedcc1a924b3f3baf5b6bad7deb27d009a431c99a4e4fac64acfde7","name":"uttarakuru.jpg","type":"image/jpeg","lastModified":1793977984452,"size":493714},{"id":"32789d9a94b4c9d086509cd6a8630e125dd1cd9692ca7e8432f64be8072b38cbd182c813aff3bbd1cb33bdf3bbf350abd2588fe527d71bf5bb23a40a466afff4","href":"https://static.observableusercontent.com/files/32789d9a94b4c9d086509cd6a8630e125dd1cd9692ca7e8432f64be8072b38cbd182c813aff3bbd1cb33bdf3bbf350abd2588fe527d71bf5bb23a40a466afff4","name":"tlalocan.jpg","type":"image/jpeg","lastModified":1793977984456,"size":260997},{"id":"d4e353a118260c07ba651995af4b7ecbdae573e153bbd788ac053623cadc0831eb3d8207659fcd832f7af5f46ff633c197c5bfefa5fc8fcb04cce37839b3e3cf","href":"https://static.observableusercontent.com/files/d4e353a118260c07ba651995af4b7ecbdae573e153bbd788ac053623cadc0831eb3d8207659fcd832f7af5f46ff633c197c5bfefa5fc8fcb04cce37839b3e3cf","name":"yvy.jpg","type":"image/jpeg","lastModified":1793977984460,"size":460160},{"id":"4fc98e50b458d2460a4d69279101119b559c3fe1c831af52c5b6d7afe5b14d587e5090dbf1b251d0a09093db1db006d133d3fd2434da4bba2115a5a9cb0a43cb","href":"https://static.observableusercontent.com/files/4fc98e50b458d2460a4d69279101119b559c3fe1c831af52c5b6d7afe5b14d587e5090dbf1b251d0a09093db1db006d133d3fd2434da4bba2115a5a9cb0a43cb","name":"pulotu.jpg","type":"image/jpeg","lastModified":1794044054436,"size":81644},{"id":"934deda112e3622883590ee83c4cba3223b4ac4b1e23a183035bf330b9572bd5ad39d7a1a2a3f36ea54451d99232d4e279c0b23d59e886b02296733d4aa9a8bb","href":"https://static.observableusercontent.com/files/934deda112e3622883590ee83c4cba3223b4ac4b1e23a183035bf330b9572bd5ad39d7a1a2a3f36ea54451d99232d4e279c0b23d59e886b02296733d4aa9a8bb","name":"utopias.json","type":"application/json","lastModified":1794044133004,"size":19616}] 47:{"id":"155a11961f1e8083","slug":"30-day-map-challenge-2026-day-8-utopia","title":"Day 8: Utopia","thumbnail":"7c3c42cbee34c90c2d8dc0c15278a7e41df30324d9558a04b0bfcfb99b65e7e5","access_level":"public","create_time":"$D2026-11-06T13:57:40.525Z","update_time":"$D2026-11-08T10:22:58.535Z","view_time":null,"first_public_time":"$D2026-11-08T07:40:46.610Z","has_unpublished_edits":null,"fork":false,"stars":1,"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":57,"publish_version":57,"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 8: Utopia","cells":[{"id":1,"value":"$${nav(8)}\n\n# Day 8: Utopia\n\nTwelve utopias from twelve cultures, from Egypt to Tonga, in the order they were first recorded: not lost paradises, but ideal places out of time, where nobody owns, grows old or goes hungry. Scroll inside the map to travel from one to the next: the clouds part over each place, as widely as it is vague.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"map = {\n fonts; // wait for the fonts of the names\n return utopiaVoyage(data, land, {d3geo, images, invalidation});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"// series navigation, from Day 1\nimport {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":4,"value":"data = FileAttachment(\"utopias.json\").json()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"land = {\n // Natural Earth land at 1:110m, from the world-atlas package\n const world = await d3.json(\"https://cdn.jsdelivr.net/npm/world-atlas@2.0.2/land-110m.json\");\n return topojson.feature(world, world.objects.land);\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3geo = import(\"https://cdn.jsdelivr.net/npm/d3-geo-projection@4.0.0/+esm\")\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"fonts = {\n // EB Garamond for the Latin and Cyrillic names, and a Noto face for each other script\n const families = [\"EB+Garamond:ital@0;1\", \"Noto+Serif+TC\", \"Noto+Serif+JP\", \"Noto+Serif+Tibetan\", \"Noto+Serif+Devanagari\", \"Noto+Sans+Egyptian+Hieroglyphs\"];\n const link = html` `family=${f}`).join(\"&\")}&display=swap\">`;\n document.head.append(link);\n invalidation.then(() => link.remove());\n await new Promise((resolve) => (link.onload = link.onerror = resolve));\n await Promise.all([\"15px 'EB Garamond'\", \"italic 15px 'EB Garamond'\", \"15px 'Noto Serif TC'\", \"15px 'Noto Serif JP'\",\n \"15px 'Noto Serif Tibetan'\", \"15px 'Noto Serif Devanagari'\", \"15px 'Noto Sans Egyptian Hieroglyphs'\"].map((f) => document.fonts.load(f, \"AaỹКи桃竜ཤउ𓇏\")));\n return families.map((f) => f.split(\":\")[0].replaceAll(\"+\", \" \"));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"images = {\n // the pictures of the cards (Wikimedia Commons, see the credits on each card)\n const files = {\n aaru: FileAttachment(\"aaru.jpg\"),\n uttarakuru: FileAttachment(\"uttarakuru.jpg\"),\n taohuayuan: FileAttachment(\"taohuayuan.jpg\"),\n ryugu: FileAttachment(\"ryugu.jpg\"),\n shambhala: FileAttachment(\"shambhala.jpg\"),\n cocagne: FileAttachment(\"cocagne.jpg\"),\n utopia: FileAttachment(\"utopia.jpg\"),\n tlalocan: FileAttachment(\"tlalocan.jpg\"),\n yvy: FileAttachment(\"yvy.jpg\"),\n tirnanog: FileAttachment(\"tirnanog.jpg\"),\n kitezh: FileAttachment(\"kitezh.jpg\"),\n pulotu: FileAttachment(\"pulotu.jpg\")\n };\n return Object.fromEntries(await Promise.all(Object.entries(files).map(async ([id, file]) => [id, await file.url()])));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"2"}} 42:null