43:["$","title",null,{"children":"Day 12: Power | Xavier Olive | Observable"}] 4b:T661,**How it is made.** The capitals come from Wikidata (property P36, *capital*), for every item that is a sovereign state, a country, an empire, a city-state or a historical country, including its subclasses (kingdoms, sultanates, khanates…): 2,601 states and 3,126 capital periods. A capital's years are those given on the statement when there are any; otherwise the capital runs from the state's founding to the next capital of the same state (but a country's current capital runs on through temporary ones, as Paris did through Vichy), to the state's end, or to today, unless Wikidata classes the state as historical (Scythia does not rule from Simferopol today). Places less than 6 km apart are merged into one dot (a palace and its city, Tokyo City and Tokyo Prefecture), and labels use the name of the time (Tenochtitlan, Constantinople). Among the capitals of the chosen year, the labels go to those that served the most states over time. **Caveats.** Wikidata is as uneven as the writing of history. Europe's many small states, such as those of the Holy Roman Empire, shine brighter than those of Africa or the Americas; states without a recorded capital are missing; and the oldest dates mix archaeology and legend (Gojoseon, around Pyongyang, is dated to 2333 BCE). A capital is not always where power sat either: courts moved, and some capitals were only nominal. One correction by hand: Andorra la Vella is a capital from 1278, the year of the paréage, where Wikidata only dates Andorra from its 1993 constitution. **Source.** Wikidata query of 8 November 2026 (CC0). Land: Natural Earth via world-atlas.4c:T3a2a,// Day 12, Power: every city that was the capital of a sovereign or historical state (Wikidata), on a rotating globe // with a time slider. Capitals of the chosen year glow; former capitals stay as faint embers. The globe turns slowly // by itself; drag to turn it, scroll or pinch to zoom (playing or paused); it resumes turning a few seconds later. // powerMap(data, {world, invalidation}): data = {now, places: [{name, aliases, lon, lat, first, states, spans: // [[start, end, state, qid, name of the place then]]}]}, world = world-atlas land (TopoJSON), invalidation = stops the animation. function powerMap(data, {world, invalidation} = {}) { const {places, now} = data; const uid = Math.random().toString(36).slice(2, 8); const BG = "#0e1420", SEA = "#111a29", LAND = "#1d2635", COAST = "#2e3a4d", GOLD = "#ffcf6b", EMBER = "#a8743a", INK = "#e9e2d0"; const land = topojson.feature(world, world.objects.land); const esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({"&": "&", "<": "<", ">": ">", '"': """})[c]); const fmt = (y) => (y <= 0 ? `${1 - y} BCE` : `${y}`); // astronomical years: 0 = 1 BCE const MIN = d3.min(places, (p) => p.first); // slider position (0-1) -> year: stretched over the last centuries, where most capitals are const yearOf = d3.scaleLinear([0, 0.18, 0.42, 0.7, 1], [MIN, -500, 800, 1700, now]).clamp(true); const root = document.createElement("div"); root.className = `power-${uid}`; root.innerHTML = ``; const canvas = document.createElement("canvas"); root.append(canvas); canvas.setAttribute("role", "img"); canvas.setAttribute("aria-label", "Globe of the cities that were capitals of states, for the year chosen with the slider below"); const head = document.createElement("div"); head.className = "head"; head.innerHTML = `

`; root.append(head); const help = document.createElement("div"); help.className = "help"; help.innerHTML = "drag to turn · scroll or pinch to zoom"; root.append(help); const zoomBox = document.createElement("div"); zoomBox.className = "zoom"; zoomBox.innerHTML = ``; root.append(zoomBox); const tip = document.createElement("div"); tip.className = "tip"; root.append(tip); const bar = document.createElement("div"); bar.className = "bar"; bar.innerHTML = ``; root.append(bar); const ticks = document.createElement("div"); ticks.className = "ticks"; root.append(ticks); const play = bar.querySelector(".play"), range = bar.querySelector("input"); // ── globe: rotation [λ, φ] and zoom k (1 = the whole globe fits) ── const projection = d3.geoOrthographic().clipAngle(90).precision(0.4); const ctx = canvas.getContext("2d"); const path = d3.geoPath(projection, ctx); const graticule = d3.geoGraticule10(), sphere = {type: "Sphere"}; let rot = [-15, -25], k = 1, lastTouch = -1e9; // starts over Europe and Africa, tilted to show the north const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches; const idle = () => performance.now() - lastTouch > 3500; let w = 0, h = 0, dpr = 1, r0 = 1; const layout = () => { w = root.clientWidth; if (!w) return; h = Math.round(Math.min(w * 0.66, 760)); r0 = Math.min(w, h) / 2 - 14; dpr = Math.min(2, window.devicePixelRatio || 1); canvas.width = Math.round(w * dpr); canvas.height = Math.round(h * dpr); canvas.style.height = `${h}px`; zoomBox.style.bottom = `${root.clientHeight - h + 12}px`; head.querySelector(".year").style.fontSize = `${Math.max(26, Math.min(44, w / 22))}px`; const tw = ticks.clientWidth; ticks.innerHTML = [-2999, -999, 1, 1000, 1500, 1800, 2000].filter((y) => y >= MIN) // astronomical: -2999 = 3000 BCE .map((y) => `${y === 1 ? "1 CE" : fmt(y)}`).join(""); dirty = true; }; const ro = new ResizeObserver(layout); ro.observe(root); // drag turns the globe (slower when zoomed in); wheel and pinch zoom, at any time const zoom = d3.zoom().scaleExtent([1, 24]).filter((ev) => !ev.button) .on("start", () => { lastTouch = performance.now(); tip.style.display = "none"; }) .on("zoom", (ev) => { lastTouch = performance.now(); const se = ev.sourceEvent, t = ev.transform; k = t.k; if (se && (se.type === "mousemove" || se.type === "pointermove" || (se.type === "touchmove" && se.touches?.length === 1))) { const dx = t.x - prev.x, dy = t.y - prev.y, s = 90 / (r0 * k); rot = [rot[0] + dx * s, Math.max(-85, Math.min(85, rot[1] - dy * s))]; } prev = {x: t.x, y: t.y}; dirty = true; }) .on("end", () => { lastTouch = performance.now(); }); let prev = {x: 0, y: 0}; d3.select(canvas).call(zoom).on("dblclick.zoom", null); zoomBox.querySelector(".in").addEventListener("click", () => d3.select(canvas).transition().duration(400).call(zoom.scaleBy, 2)); zoomBox.querySelector(".out").addEventListener("click", () => d3.select(canvas).transition().duration(400).call(zoom.scaleBy, 0.5)); // ── draw ── const active = (p, y) => p.spans.some((s) => s[0] <= y && y <= s[1]); // the name of a place in a given year: Tenochtitlan, then Mexico City; Constantinople, then Istanbul const nameAt = (p, y) => { const on = p.spans.filter((s) => s[0] <= y && y <= s[1]); if (on.some((s) => s[4] === p.name)) return p.name; // Rome, not Vatican City, when both are capitals return (on[0] ?? p.spans.findLast((s) => s[0] <= y) ?? p.spans[0])[4] ?? p.name; }; const xy = new Float32Array(places.length * 2), vis = new Uint8Array(places.length); let year = 1200, dirty = true, hovered = -1; const draw = () => { projection.rotate(rot).scale(r0 * k).translate([w / 2, h / 2]); ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.fillStyle = BG; ctx.fillRect(0, 0, w, h); ctx.beginPath(); path(sphere); ctx.fillStyle = SEA; ctx.fill(); ctx.beginPath(); path(graticule); ctx.strokeStyle = "rgba(120,140,170,0.08)"; ctx.lineWidth = 0.6; ctx.stroke(); ctx.beginPath(); path(land); ctx.fillStyle = LAND; ctx.fill(); ctx.strokeStyle = COAST; ctx.lineWidth = 0.6; ctx.stroke(); // which places face us, and where they are const c = [-rot[0], -rot[1]]; for (let i = 0; i < places.length; i++) { const p = places[i]; vis[i] = 0; if (p.first > year || d3.geoDistance([p.lon, p.lat], c) > Math.PI / 2 - 0.02) continue; const q = projection([p.lon, p.lat]); if (q[0] < -10 || q[0] > w + 10 || q[1] < -10 || q[1] > h + 10) continue; xy[2 * i] = q[0]; xy[2 * i + 1] = q[1]; vis[i] = 1; } const s = Math.max(0.8, Math.min(2.2, (r0 / 300) * Math.sqrt(k))); // dots grow a little with zoom const lit = []; ctx.fillStyle = EMBER; ctx.globalAlpha = 0.4; // embers: capitals of the past; capitals to come are not shown for (let i = 0; i < places.length; i++) { if (!vis[i]) continue; if (active(places[i], year)) { lit.push(i); continue; } ctx.beginPath(); ctx.arc(xy[2 * i], xy[2 * i + 1], 1.1 * s, 0, 2 * Math.PI); ctx.fill(); } ctx.globalCompositeOperation = "lighter"; // lit: a glow, then a bright core for (const i of lit) { const x = xy[2 * i], y = xy[2 * i + 1], r = 7 * s; const g = ctx.createRadialGradient(x, y, 0, x, y, r); g.addColorStop(0, "rgba(255, 207, 107, 0.32)"); g.addColorStop(1, "rgba(255, 170, 60, 0)"); ctx.globalAlpha = 1; ctx.fillStyle = g; ctx.beginPath(); ctx.arc(x, y, r, 0, 2 * Math.PI); ctx.fill(); } ctx.globalCompositeOperation = "source-over"; ctx.globalAlpha = 1; ctx.fillStyle = "#fff4d6"; for (const i of lit) { ctx.beginPath(); ctx.arc(xy[2 * i], xy[2 * i + 1], 1.7 * s, 0, 2 * Math.PI); ctx.fill(); } ctx.beginPath(); path(sphere); ctx.strokeStyle = "rgba(160,180,210,0.25)"; ctx.lineWidth = 1; ctx.stroke(); // labels: the most enduring seats of power lit this year (most states over time), without overlaps; more when zoomed in ctx.font = "11.5px var(--sans-serif, system-ui, sans-serif)"; ctx.textBaseline = "middle"; const boxes = [], max = k >= 4 ? Infinity : Math.round(12 + 6 * Math.log2(k)); // zoomed in: every lit capital that has room for (const i of lit.slice().sort((a, b) => places[b].states - places[a].states)) { const p = places[i], x = xy[2 * i] + 5 * s, y = xy[2 * i + 1], name = nameAt(p, year); const tw = ctx.measureText(name).width, box = [x - 2, y - 8, x + tw + 2, y + 8]; if (boxes.some((b) => box[0] < b[2] && box[2] > b[0] && box[1] < b[3] && box[3] > b[1])) continue; boxes.push(box); ctx.lineWidth = 3; ctx.strokeStyle = "rgba(14,20,32,0.85)"; ctx.strokeText(name, x, y); ctx.fillStyle = INK; ctx.fillText(name, x, y); if (boxes.length >= max) break; } if (hovered >= 0 && vis[hovered]) { ctx.strokeStyle = GOLD; ctx.lineWidth = 1.2; ctx.beginPath(); ctx.arc(xy[2 * hovered], xy[2 * hovered + 1], 5 * s, 0, 2 * Math.PI); ctx.stroke(); } head.querySelector(".year").textContent = fmt(Math.round(year)); head.querySelector(".count").textContent = `${lit.length} capital${lit.length === 1 ? "" : "s"}`; }; // ── tooltip ── const describe = (p) => { const rows = p.spans.map(([a, b, st, , nm]) => `

${esc(st)}${nm && nm !== p.name ? ` (as ${esc(nm)})` : ""}, ${fmt(a)}${b > a ? `–${b >= now ? "today" : fmt(b)}` : ""}

`); const more = rows.length > 12 ? `

and ${rows.length - 12} more

` : ""; const nm = nameAt(p, year), other = [p.name, ...p.aliases].filter((n) => n !== nm); return `${esc(nm)}${other.length ? ` (${other.slice(0, 3).map(esc).join(", ")})` : ""}${rows.slice(0, 12).join("")}${more}`; }; let hoverAt = null; // pointer position, so the tooltip follows a turning globe const updateHover = () => { if (!hoverAt) return; const [x, y] = hoverAt; let best = -1, bd = 100; for (let i = 0; i < places.length; i++) { if (!vis[i]) continue; const dx = xy[2 * i] - x, dy = xy[2 * i + 1] - y, d = dx * dx + dy * dy; if (d < bd) { bd = d; best = i; } } if (best !== hovered) { hovered = best; dirty = true; } if (best < 0) { tip.style.display = "none"; return; } tip.innerHTML = describe(places[best]); tip.style.display = "block"; const tw = tip.offsetWidth, th = tip.offsetHeight; tip.style.left = `${Math.max(6, Math.min(w - tw - 6, x + 14))}px`; tip.style.top = `${Math.max(6, Math.min(h - th - 6, y + 14))}px`; }; canvas.addEventListener("pointermove", (ev) => { if (ev.buttons) { hoverAt = null; tip.style.display = "none"; return; } // dragging const r = canvas.getBoundingClientRect(); hoverAt = [ev.clientX - r.left, ev.clientY - r.top]; if (ev.pointerType === "mouse") lastTouch = performance.now() - 2500; // hovering slows the turning down to a stop shortly updateHover(); }); canvas.addEventListener("pointerleave", () => { hoverAt = null; tip.style.display = "none"; hovered = -1; dirty = true; }); // ── slider and play ── let playing = false; const setYear = (y) => { year = y; range.value = Math.round(yearOf.invert(y) * 1000); dirty = true; }; range.addEventListener("input", () => { year = Math.round(yearOf(range.value / 1000)); dirty = true; lastTouch = performance.now(); }); range.addEventListener("pointerdown", () => { lastTouch = performance.now(); }); // the globe holds still while the slider moves play.addEventListener("click", () => { playing = !playing; play.textContent = playing ? "❚❚" : "▶"; play.setAttribute("aria-label", playing ? "Pause" : "Play"); if (playing && year >= now) setYear(MIN); }); setYear(year); let frame, t0 = performance.now(); const tick = (t) => { const dt = Math.min(100, t - t0); t0 = t; if (playing) { // constant speed along the slider: about 40 s from the first capital to today const v = Math.min(1, yearOf.invert(year) + dt / 40000); year = yearOf(v); range.value = Math.round(v * 1000); dirty = true; if (v >= 1) { playing = false; play.textContent = "▶"; } } if (!reduced && idle()) { rot = [rot[0] + dt * 0.004 / Math.sqrt(k), rot[1]]; dirty = true; } // about 4° a second, slower when zoomed in if (w && dirty) { draw(); dirty = false; if (hoverAt) updateHover(); } frame = requestAnimationFrame(tick); }; frame = requestAnimationFrame(tick); invalidation?.then(() => { cancelAnimationFrame(frame); ro.disconnect(); }); return root; }4d:[{"id":"828efc13d77b2cf6fcde0375b2855c6c31d37d9ec5d7bba88e4b1f31711dcf4691e15b4a8e8deefe5911ac9c78616092ac39bca52c8bb7a3d8afd59968cff99b","href":"https://static.observableusercontent.com/files/828efc13d77b2cf6fcde0375b2855c6c31d37d9ec5d7bba88e4b1f31711dcf4691e15b4a8e8deefe5911ac9c78616092ac39bca52c8bb7a3d8afd59968cff99b","name":"capitals.json","type":"application/json","lastModified":1794202607126,"size":366040}] 47:{"id":"8869b51a81121fe6","slug":"30-day-map-challenge-2026-day-12-power","title":"Day 12: Power","thumbnail":"a8b77544b78741cebb4c770ce36b47743b3221cb4ef5c03a584d9e031f39f1af","access_level":"public","create_time":"$D2026-11-08T19:44:59.810Z","update_time":"$D2026-11-09T05:37:08.473Z","view_time":null,"first_public_time":"$D2026-11-11T22:23:47.075Z","has_unpublished_edits":null,"fork":false,"stars":2,"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":40,"publish_version":40,"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 12: Power","cells":[{"id":1,"value":"$${nav(12)}\n\n\n\n\n# Day 12: Power\n\n\n\n\nWhere does power sit? Each dot is a city that was, at some point, the capital of a sovereign state, a kingdom, an empire, a sultanate or a city-state: 1,803 places, from Kerma and Memphis, more than five thousand years ago, to the 211 capitals of today. Press play, or drag the slider: the capitals of the chosen year glow, former ones remain as embers. Point at a city to see every state that was ruled from it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"map = powerMap(data, {world, invalidation})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"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":6,"value":"data = FileAttachment(\"capitals.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"world = d3.json(\"https://cdn.jsdelivr.net/npm/world-atlas@2.0.2/land-50m.json\")","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"}],"files":"$W4d","stdlib":"2"}} 42:null