25:["$","title",null,{"children":"The Line (The End) | Visionscarto | Observable"}] 4b:T8b3,// Route of The Line, from OpenStreetMap (© OpenStreetMap contributors, ODbL): // Neom Spine railway (ways 1167745699 and 1167745698), Highland tunnel // (way 1167745697) and the proposed eastern section (way 1249890181). const route = [ [34.6260676, 28.1553986], // Gulf of Aqaba coast [35.243314, 28.1038448], // near the Oxagon connector [35.3364378, 28.0960647], [35.7069472, 28.0632531], // Highland tunnel entrance [35.7696314, 28.0575904], [35.8018539, 28.0546794], [35.8526383, 28.0501189], [35.883952, 28.0472623], [35.9189198, 28.0441579], [35.952347, 28.0410827], [35.9927814, 28.0374293], // tunnel exit [36.1730255, 28.02126], // start of the proposed section [36.345249, 28.0087442], // eastern end ]; const routeStart = route[0]; const routeEnd = route.at(-1); const nominalLengthKm = 170; // length shown in the counter const tileZoom = 13; // Esri tile zoom (~17 m per pixel at this latitude) const stripWidthKm = 14; const stripMarginKm = 9; // imagery shown before km 0 (sea) and after the end // Distance from the western end, in km (the route is almost straight) const kmFromStart = (point) => d3.geoDistance(routeStart, point) * 6371.0088; const labels = [ { km: -3, side: "right", title: "Gulf of Aqaba", text: "The Line starts at the coast, where a “hidden marina” has been dug out.", }, { km: 1.2, side: "left", title: "First phase: 2.4km", text: "Only three modules of the original plan are now targeted.", }, { km: kmFromStart(route[1]), side: "right", title: "Oxagon connector", text: "A rail link branches south towards the Oxagon port.", }, { km: kmFromStart(route[3]), side: "left", title: "Highland tunnel", text: "28km of twin tunnels bored through the mountains.", }, { km: kmFromStart(route[10]), side: "right", title: "Tunnel exit", text: "The spine railway comes back to the surface.", }, { km: kmFromStart(route[11]), side: "left", title: "Proposed only", text: "Past here the route is only planned.", }, { km: kmFromStart(routeEnd), side: "right", title: "170km", text: "The planned eastern end of The Line.", }, ];4c:Ta1f,// Geometry of the satellite strip: Web Mercator pixels at tileZoom, rotated so // that The Line runs from the top of the strip to the bottom. const strip = (() => { const worldSize = 256 * 2 ** tileZoom; const mercator = ([lng, lat]) => { const phi = (lat * Math.PI) / 180; return [ ((lng + 180) / 360) * worldSize, ((1 - Math.log(Math.tan(phi) + 1 / Math.cos(phi)) / Math.PI) / 2) * worldSize, ]; }; const start = mercator(routeStart); const end = mercator(routeEnd); const lengthPx = Math.hypot(end[0] - start[0], end[1] - start[1]); const lengthKm = kmFromStart(routeEnd); const pxPerKm = lengthPx / lengthKm; const along = [(end[0] - start[0]) / lengthPx, (end[1] - start[1]) / lengthPx]; const across = [along[1], -along[0]]; const width = Math.round(stripWidthKm * pxPerKm); const margin = Math.round(stripMarginKm * pxPerKm); const height = Math.round(lengthPx + 2 * margin); // Mercator pixel → strip pixel const fromMercator = ([x, y]) => { const dx = x - start[0]; const dy = y - start[1]; return [ dx * across[0] + dy * across[1] + width / 2, dx * along[0] + dy * along[1] + margin, ]; }; return { start, end, along, across, width, height, margin, pxPerKm, lengthKm, fromMercator, project: (point) => fromMercator(mercator(point)), // [lng, lat] → strip pixel }; })(); // Esri World Imagery tiles drawn onto a canvas in strip coordinates const satelliteCanvas = (() => { const { start, end, along, across, width, height, margin } = strip; const canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; canvas.style.cssText = "display: block; width: 100%; height: auto; background: #3a3128;"; const context = canvas.getContext("2d"); const [e, f] = strip.fromMercator([0, 0]); context.setTransform(across[0], along[0], across[1], along[1], e, f); const pad = width / 2 + margin; const [x0, x1] = d3.extent([start[0], end[0]]); const [y0, y1] = d3.extent([start[1], end[1]]); for (let tx = Math.floor((x0 - pad) / 256); tx <= (x1 + pad) / 256; tx++) { for (let ty = Math.floor((y0 - pad) / 256); ty <= (y1 + pad) / 256; ty++) { const image = new Image(); image.crossOrigin = "anonymous"; image.onload = () => context.drawImage(image, tx * 256, ty * 256, 256.6, 256.6); // overlap hides seams image.src = `https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/${tileZoom}/${ty}/${tx}`; } } return canvas; })();4d:T2eb8,// Map settings const panelHeight = 720; const fogFrontPosition = 0.55; // fog edge, as a fraction of the panel height const corridorWidth = 50; // clear corridor along The Line (px) const fogRampLength = 1000; // the fog fades in over the first 1000px of the strip const fogFadeLength = 450; // soft transition at the fog edge (px) const fogFadeOvershoot = 0.4; // fraction of that transition drawn past the front const labelRevealOffset = 20; // a label appears once the front is this far past it (px) const labelSlide = 20; // labels slide up by this much (% of their height) as they appear const locatorScale = 0.8; // display size of the inset map (1 = 210×170px) const redSeaLabelAngle = 55; // degrees, clockwise const scrollHintThreshold = 30; // the scroll hint fades out after scrolling this far (px) // Smoothstep gradient stops, from opaque to transparent (or the reverse) const smoothStops = (length, position, reverse = false) => d3 .range(0, 1.0001, 0.125) .map((t) => { const opacity = 1 - t * t * (3 - 2 * t); const alpha = reverse ? 1 - opacity : opacity; return `rgba(0,0,0,${alpha.toFixed(3)}) ${position(t * length)}`; }) .join(", "); // Builds the scrolling satellite strip and returns the panel element function neomMap({ invalidation } = {}) { const kmToY = (km) => strip.margin + km * strip.pxPerKm; // strip px const routePoints = route.map(strip.project); const routeXAt = d3 .scaleLinear(routePoints.map(([, y]) => y), routePoints.map(([x]) => x)) .clamp(true); const endY = kmToY(strip.lengthKm); const labelYs = labels.map((label) => kmToY(label.km)); // Locator map (pinned to the bottom right of the panel), drawn in a // 210×170 coordinate system and displayed at locatorScale const locatorWidth = 210; const locatorHeight = 170; const projection = d3.geoMercator().fitExtent( [[0, 0], [locatorWidth, locatorHeight]], { type: "MultiPoint", coordinates: [[32.6, 25.6], [39.4, 30.4]] }, ); const path = d3.geoPath(projection); const countries = topojson.feature(world50, world50.objects.countries).features; const locatorStart = projection(routeStart); const locatorEnd = projection(routeEnd); const locatorAt = d3.interpolateArray(locatorStart, locatorEnd); // progress → [x, y] const [seaX, seaY] = projection([34.3, 27.3]); // in the Red Sea, near its northern end const [, egyptY] = projection([0, 26.1]); // mainland Egypt, south of the Sinai const progressLine = svg``; const progressDot = svg``; const counter = html`0`; const progressBar = html`

`; const locator = html`

${counter}/${nominalLengthKm}km

${progressBar}

`; // Scroll hint: a bouncing chevron at the bottom centre, hidden once the user scrolls const scrollHint = html`

Scroll

`; // Marker at the current position on the route const marker = html`

`; // Fog over the part already travelled, except a corridor along The Line const fog = html`

`; // Fog mask = fade-in at the start ∩ fade-out at the front ∩ not the corridor. // The corridor is drawn in screen px, so it is rebuilt when the scale changes. let maskScale; function updateFogMask(scale) { if (scale === maskScale) return; maskScale = scale; const width = strip.width * scale; const height = strip.height * scale; const points = routePoints.map(([x, y]) => `${x * scale},${y * scale}`).join(" "); const corridor = ``; const image = [ `linear-gradient(${smoothStops(fogRampLength, (d) => `${d}px`, true)})`, `linear-gradient(${smoothStops(fogFadeLength, (d) => `calc(100% - ${fogFadeLength - d}px)`)})`, `url("data:image/svg+xml,${encodeURIComponent(corridor)}")`, ].join(", "); const size = `100% 100%, 100% 100%, ${width}px ${height}px`; fog.style.maskImage = fog.style.webkitMaskImage = image; fog.style.maskSize = fog.style.webkitMaskSize = size; } // Labels and km ticks, positioned as a percentage of the strip height const top = (km) => `${(kmToY(km) / strip.height) * 100}%`; const labelElements = labels.map( (label) => html`

${label.title}

${label.text}

`, ); const ticks = d3.range(0, nominalLengthKm + 1, 10).map( (km) => html`

${km % 50 === 0 ? `${km}km` : "–"}

`, ); const stripElement = html`

${satelliteCanvas}

${ticks}${fog}${marker}${labelElements}

`; // Footer: credits near the top, clear of the inset map in the bottom right const panel = html`

${locator}${scrollHint}

${stripElement}

Satellite imagery: Esri, Maxar, Earthstar Geographics

Route: OpenStreetMap contributors (Neom Spine railway, Highland tunnel, The Line)

`; function update() { const scale = stripElement.clientWidth / strip.width; // screen px per strip px if (!scale) return; // not laid out yet scrollHint.style.opacity = panel.scrollTop > scrollHintThreshold ? 0 : 1; const front = panel.scrollTop + panelHeight * fogFrontPosition - stripElement.offsetTop; // screen px const frontY = front / scale; // strip px const km = Math.max(0, Math.min(strip.lengthKm, (frontY - strip.margin) / strip.pxPerKm)); const progress = km / strip.lengthKm; // The fog follows the front, but stops at the end of The Line updateFogMask(scale); const fogEnd = Math.min(front, endY * scale) + fogFadeLength * fogFadeOvershoot; fog.style.height = `${Math.max(0, fogEnd)}px`; const y = kmToY(km); marker.style.transform = `translate(${routeXAt(y) * scale}px, ${y * scale}px)`; marker.style.opacity = frontY > strip.margin ? 1 : 0; labelElements.forEach((element, i) => { const visible = labelYs[i] * scale < front - labelRevealOffset; element.style.opacity = visible ? 1 : 0; element.style.transform = `translateY(${visible ? -50 : -50 + labelSlide}%)`; }); const [x, yLocator] = locatorAt(progress); progressLine.setAttribute("x2", x); progressLine.setAttribute("y2", yLocator); progressDot.setAttribute("cx", x); progressDot.setAttribute("cy", yLocator); counter.textContent = Math.round(progress * nominalLengthKm); progressBar.style.width = `${progress * 100}%`; } let frame = null; panel.addEventListener( "scroll", () => (frame ??= requestAnimationFrame(() => ((frame = null), update()))), { passive: true }, ); const resizeObserver = new ResizeObserver(update); // also fires once attached resizeObserver.observe(stripElement); invalidation?.then(() => resizeObserver.disconnect()); return panel; }4e:[] 47:{"id":"4a205035963d3031","slug":"the-line","title":"The Line (The End)","thumbnail":"aa2793262910ddcda328d70123052c0f4bcca24e697895eca10f5617e6bbdf85","access_level":"public","create_time":"$D2026-10-23T16:05:34.641Z","update_time":"$D2026-11-01T21:53:43.757Z","view_time":null,"first_public_time":"$D2026-11-01T21:38:55.914Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"166c5a16a7264bea","login":"visionscarto","name":"Visionscarto","avatar_url":"https://avatars-next.observableusercontent.com/9946d22004b9d0eaf6a5bfda50b0a32ca1003656c403106c7b54f8dd5cf784b7","tier":"starter_2024","bio":"Maps — and other representations of the world.","followed_by_you":false,"follows_you":false},"version":134,"publish_version":134,"role":null,"authored":false,"authors":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"bio":"Vocateur.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"958a492ccf138cc7","slug":"30daymapchallenge","title":"#30DayMapChallenge","owner":{"id":"166c5a16a7264bea","login":"visionscarto","name":"Visionscarto"}},"type":"notebook","body":{"titling":"auto","title":"The Line (The End)","cells":[{"id":1,"value":"# The Line (The End)\n\n*Day 02: Line(s).*\n\nA tentative remake of the long satellite-strip section in *Financial Times'* must-read piece: [“End of The Line”](https://ig.ft.com/saudi-neom-line/), by Alison Killing (Nov. 6, 2025). (Note that the original's design is much better than this clone! Just go see it.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"neomMap({ invalidation })","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"---\n*code*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import world50 from \"npm:world-atlas/countries-50m.json\" with {type: \"json\"};","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$4b","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$4c","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$4d","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"2"}} 24:null