3e:null 3f:["$","title",null,{"children":"Horizon Overflow | Kallol Chatterjee | Observable"}] 45:Tb53,globe = { const W = 640, cx = W / 2, cy = W / 2, R = W / 2 - 20; const toRad = (d) => (d * Math.PI) / 180; let rot = { lon: 0, lat: 15 }; function project(lon, lat) { const dλ = toRad(lon - rot.lon), φ = toRad(lat), φc = toRad(rot.lat); const cosφ = Math.cos(φ), sinφ = Math.sin(φ), cosφc = Math.cos(φc), sinφc = Math.sin(φc); let px = R * cosφ * Math.sin(dλ); let py = -R * (cosφc * sinφ - sinφc * cosφ * Math.cos(dλ)); // ★ Horizon Overflow — 4 lines ★ const cosC = sinφc * sinφ + cosφc * cosφ * Math.cos(dλ); if (cosC < 0) { const d = Math.hypot(px, py) || 1; const s = (2 * R - d) / d; px *= s; py *= s; } return [cx + px, cy + py]; } const visible = (lon, lat) => { const dλ = toRad(lon - rot.lon), φ = toRad(lat), φc = toRad(rot.lat); return ( Math.sin(φc) * Math.sin(φ) + Math.cos(φc) * Math.cos(φ) * Math.cos(dλ) > 0 ); }; const polysOf = (f) => f.geometry.type === "Polygon" ? [f.geometry.coordinates] : f.geometry.coordinates; const pathOf = (f) => polysOf(f) .flatMap((poly) => poly.map( (ring) => ring .map(([lo, la], i) => { const [x, y] = project(lo, la); return `${i ? "L" : "M"}${x.toFixed(1)},${y.toFixed(1)}`; }) .join("") + "Z" ) ) .join(" "); const svg = d3 .create("svg") .attr("viewBox", [0, 0, W, W]) .attr("width", W) .style("cursor", "grab") .style("user-select", "none") .style("display", "block") .style("margin", "0 auto"); svg .append("defs") .append("clipPath") .attr("id", "clip") .append("circle") .attr("cx", cx) .attr("cy", cy) .attr("r", R); svg .append("circle") .attr("cx", cx) .attr("cy", cy) .attr("r", R) .attr("fill", "#2d88c0"); const g = svg.append("g").attr("clip-path", "url(#clip)"); function render() { g.selectAll("*").remove(); countries.forEach((f) => { if (!polysOf(f).some((poly) => poly[0].some((c) => visible(...c)))) return; g.append("path") .attr("d", pathOf(f)) .attr("fill", "#5b9a3c") .attr("stroke", "#fffef2") .attr("stroke-width", 0.5); }); } render(); let dragging = false, sx, sy, sr; svg.on("mousedown", (e) => { dragging = true; sx = e.clientX; sy = e.clientY; sr = { ...rot }; }); d3.select(window).on("mousemove.globe", (e) => { if (!dragging) return; rot.lon = sr.lon - (e.clientX - sx) * 0.3; rot.lat = Math.max(-80, Math.min(80, sr.lat + (e.clientY - sy) * 0.3)); render(); }); d3.select(window).on("mouseup.globe", () => { dragging = false; }); return svg.node(); }46:Tf32,comparison = { const W = 260, gap = 60, H = 310; const totalW = W * 3 + gap * 2; const svg = d3 .create("svg") .attr("viewBox", [0, 0, totalW, H]) .attr("width", totalW); const toRad = (d) => (d * Math.PI) / 180; const R = 110, rotLat = 0.35; const polysOf = (f) => f.geometry.type === "Polygon" ? [f.geometry.coordinates] : f.geometry.coordinates; const modes = [ { x: 0, overflow: false, clip: false, label: "Standard orthographic", sub: "Back-hemisphere folds inward" }, { x: W + gap, overflow: true, clip: false, label: "Horizon Overflow (no clip)", sub: "Back-hemisphere pushed outward" }, { x: (W + gap) * 2, overflow: true, clip: true, label: "Horizon Overflow + clip-path", sub: "Clean result, no polygon clipping" } ]; const defs = svg.append("defs"); modes.forEach(({ x }, i) => { defs .append("clipPath") .attr("id", `c${i}`) .append("circle") .attr("cx", x + W / 2) .attr("cy", W / 2) .attr("r", R); }); modes.forEach(({ x, overflow, clip, label, sub }, mi) => { const cx = x + W / 2, cy = W / 2; svg .append("circle") .attr("cx", cx) .attr("cy", cy) .attr("r", R) .attr("fill", "#0f172a") .attr("stroke", "#334155") .attr("stroke-width", 1); const g = svg.append("g"); if (clip) g.attr("clip-path", `url(#c${mi})`); const pt = (lon, lat) => { const dλ = toRad(lon), φ = toRad(lat); let px = R * Math.cos(φ) * Math.sin(dλ); let py = -R * (Math.cos(rotLat) * Math.sin(φ) - Math.sin(rotLat) * Math.cos(φ) * Math.cos(dλ)); if (overflow) { const cosC = Math.sin(rotLat) * Math.sin(φ) + Math.cos(rotLat) * Math.cos(φ) * Math.cos(dλ); if (cosC < 0) { const d = Math.hypot(px, py) || 1; const s = (2 * R - d) / d; px *= s; py *= s; } } return [cx + px, cy + py]; }; const vis = (lon, lat) => { const dλ = toRad(lon), φ = toRad(lat); return ( Math.sin(rotLat) * Math.sin(φ) + Math.cos(rotLat) * Math.cos(φ) * Math.cos(dλ) > 0 ); }; countries.forEach((f, i) => { if (clip && !polysOf(f).some((poly) => poly[0].some((c) => vis(...c)))) return; const front = polysOf(f).some((poly) => poly[0].some((c) => vis(...c))); const d = polysOf(f) .flatMap((poly) => poly.map( (ring) => ring .map(([lo, la], j) => { const [x, y] = pt(lo, la); return `${j ? "L" : "M"}${x.toFixed(1)},${y.toFixed(1)}`; }) .join("") + "Z" ) ) .join(" "); g.append("path") .attr("d", d) .attr("fill", "none") .attr("stroke", front ? "#4ade80" : "#f87171") .attr("stroke-opacity", 0.8) .attr("stroke-width", 0.8); }); svg .append("circle") .attr("cx", cx) .attr("cy", cy) .attr("r", R) .attr("fill", "none") .attr("stroke", "#60a5fa") .attr("stroke-width", 1.5); svg .append("text") .attr("x", cx) .attr("y", W + 18) .text(label) .attr("fill", "#e2e8f0") .attr("font-size", 12) .attr("font-weight", "bold") .attr("text-anchor", "middle"); svg .append("text") .attr("x", cx) .attr("y", W + 34) .text(sub) .attr("fill", "#94a3b8") .attr("font-size", 11) .attr("text-anchor", "middle"); }); svg.attr( "style", "background:#0f172a;border-radius:8px;display:block;margin:0 auto" ); return svg.node(); }47:T2621,polished = { const W = 640, cx = W / 2, cy = W / 2, Rmin = 80, Rmax = W; let R = 200; const R0 = R; const toRad = (d) => (d * Math.PI) / 180; let rot = { lon: 0, lat: 15 }; // Population (millions, 2023 est.) by ISO 3166-1 numeric code const pop = { 4: 42, 8: 2.8, 12: 45, 24: 36, 32: 46, 36: 26, 40: 9.1, 50: 173, 56: 11.6, 64: 0.8, 68: 12, 70: 3.2, 72: 2.6, 76: 216, 100: 6.5, 104: 55, 108: 13, 112: 9.2, 116: 17, 120: 28, 124: 39, 140: 5.6, 144: 22, 148: 17, 152: 19, 156: 1412, 170: 52, 178: 6, 180: 102, 188: 5.2, 191: 3.9, 192: 11, 196: 1.3, 203: 10.8, 204: 13, 208: 5.9, 214: 11, 218: 18, 222: 6.3, 226: 1.5, 231: 126, 232: 3.6, 233: 1.4, 246: 5.6, 250: 68, 262: 1, 266: 2.4, 268: 3.7, 270: 2.4, 276: 84, 288: 34, 300: 10.4, 320: 18, 324: 14, 328: 0.8, 332: 12, 340: 10, 348: 9.6, 352: 0.4, 356: 1428, 360: 277, 364: 88, 368: 44, 372: 5.1, 376: 9.8, 380: 59, 384: 28, 388: 2.8, 392: 125, 400: 11, 404: 55, 408: 26, 410: 52, 414: 4.3, 417: 6.7, 418: 7.5, 422: 5.3, 426: 2.3, 430: 5.3, 434: 7, 440: 2.8, 442: 0.7, 450: 30, 454: 20, 458: 34, 466: 22, 478: 4.8, 484: 129, 496: 3.4, 504: 37, 508: 33, 512: 4.6, 516: 2.6, 524: 30, 528: 17.6, 540: 0.3, 548: 0.3, 554: 5.2, 558: 7, 562: 26, 566: 224, 578: 5.5, 586: 230, 591: 4.4, 598: 9.2, 600: 7, 604: 34, 608: 117, 616: 38, 620: 10.3, 634: 2.7, 642: 19, 643: 144, 646: 14, 682: 37, 686: 17, 694: 8.6, 702: 5.6, 703: 5.5, 704: 99, 705: 2.1, 706: 18, 710: 60, 716: 16, 724: 48, 729: 46, 740: 0.6, 752: 10.5, 756: 8.8, 760: 22, 762: 10, 764: 72, 768: 9, 780: 1.5, 784: 10, 788: 12, 792: 85, 800: 48, 804: 37, 818: 110, 826: 68, 834: 65, 840: 335, 854: 23, 858: 3.4, 860: 36, 862: 28, 887: 34, 894: 20 }; // Log color scale const colorScale = d3 .scaleSequentialLog(d3.interpolateYlOrRd) .domain([0.3, 1500]); const getColor = (f) => { const v = pop[+f.id]; return v ? colorScale(v) : "#c4b99a"; }; function project(lon, lat) { const dλ = toRad(lon - rot.lon), φ = toRad(lat), φc = toRad(rot.lat); const cosφ = Math.cos(φ), sinφ = Math.sin(φ), cosφc = Math.cos(φc), sinφc = Math.sin(φc); let px = R * cosφ * Math.sin(dλ); let py = -R * (cosφc * sinφ - sinφc * cosφ * Math.cos(dλ)); const cosC = sinφc * sinφ + cosφc * cosφ * Math.cos(dλ); if (cosC < 0) { const d = Math.hypot(px, py) || 1; const s = (2 * R - d) / d; px *= s; py *= s; } return [cx + px, cy + py]; } const visible = (lon, lat) => { const dλ = toRad(lon - rot.lon), φ = toRad(lat), φc = toRad(rot.lat); return ( Math.sin(φc) * Math.sin(φ) + Math.cos(φc) * Math.cos(φ) * Math.cos(dλ) > 0 ); }; const polysOf = (f) => f.geometry.type === "Polygon" ? [f.geometry.coordinates] : f.geometry.coordinates; const pathOf = (f) => polysOf(f) .flatMap((poly) => poly.map( (ring) => ring .map(([lo, la], i) => { const [x, y] = project(lo, la); return `${i ? "L" : "M"}${x.toFixed(1)},${y.toFixed(1)}`; }) .join("") + "Z" ) ) .join(" "); // Graticule: meridians every 30°, parallels every 30° // No visibility check needed — Horizon Overflow pushes back-hemisphere // points outside the clip, so the same clip-path handles everything. function graticulePath() { const parts = []; for (let lon = -180; lon < 180; lon += 30) { const pts = []; for (let lat = -90; lat <= 90; lat += 2) pts.push(project(lon, lat)); parts.push( pts .map(([x, y], i) => `${i ? "L" : "M"}${x.toFixed(1)},${y.toFixed(1)}`) .join("") ); } for (let lat = -60; lat <= 60; lat += 30) { const pts = []; for (let lon = -180; lon <= 180; lon += 2) pts.push(project(lon, lat)); parts.push( pts .map(([x, y], i) => `${i ? "L" : "M"}${x.toFixed(1)},${y.toFixed(1)}`) .join("") ); } return parts.join(" "); } const svg = d3 .create("svg") .attr("viewBox", [0, 0, W, W]) .style("width", "100%") .style("cursor", "grab") .style("user-select", "none") .style("background", "#0f172a") .style("border-radius", "12px"); // Defs: clip, ocean gradient, shine gradient, atmospheric glow const defs = svg.append("defs"); defs .append("clipPath") .attr("id", "clip2") .append("circle") .attr("cx", cx) .attr("cy", cy) .attr("r", R); const ocean = defs .append("radialGradient") .attr("id", "ocean") .attr("cx", "40%") .attr("cy", "35%") .attr("r", "60%"); ocean.append("stop").attr("offset", "0%").attr("stop-color", "#60a5fa"); ocean.append("stop").attr("offset", "100%").attr("stop-color", "#1e40af"); const shine = defs .append("radialGradient") .attr("id", "shine") .attr("cx", "35%") .attr("cy", "30%") .attr("r", "60%"); shine .append("stop") .attr("offset", "0%") .attr("stop-color", "white") .attr("stop-opacity", 0.15); shine .append("stop") .attr("offset", "100%") .attr("stop-color", "white") .attr("stop-opacity", 0); const glow = defs .append("filter") .attr("id", "glow") .attr("x", "-20%") .attr("y", "-20%") .attr("width", "140%") .attr("height", "140%"); glow .append("feGaussianBlur") .attr("in", "SourceGraphic") .attr("stdDeviation", 3) .attr("result", "blur"); glow .append("feMerge") .selectAll("feMergeNode") .data(["blur", "SourceGraphic"]) .join("feMergeNode") .attr("in", (d) => d); // Layers: ocean → countries (clipped) → graticule (clipped) → glow → shine const cOcean = svg .append("circle") .attr("cx", cx) .attr("cy", cy) .attr("r", R) .attr("fill", "url(#ocean)"); const g = svg.append("g").attr("clip-path", "url(#clip2)"); const gGrat = svg .append("g") .attr("clip-path", "url(#clip2)") .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", 0.5) .attr("stroke-opacity", 0.15) .style("pointer-events", "none"); const cGlow = svg .append("circle") .attr("cx", cx) .attr("cy", cy) .attr("r", R) .attr("fill", "none") .attr("stroke", "#60a5fa") .attr("stroke-width", 1.5) .attr("stroke-opacity", 0.5) .attr("filter", "url(#glow)"); const cShine = svg .append("circle") .attr("cx", cx) .attr("cy", cy) .attr("r", R) .attr("fill", "url(#shine)") .style("pointer-events", "none"); const cClip = defs.select("circle"); function updateRadius() { cClip.attr("r", R); cOcean.attr("r", R); cGlow.attr("r", R); cShine.attr("r", R); } function render() { g.selectAll("*").remove(); countries.forEach((f) => { if (!polysOf(f).some((poly) => poly[0].some((c) => visible(...c)))) return; g.append("path") .attr("d", pathOf(f)) .attr("fill", getColor(f)) .attr("stroke", "rgba(255,255,255,0.3)") .attr("stroke-width", 0.5); }); gGrat.selectAll("*").remove(); gGrat.append("path").attr("d", graticulePath()); } render(); // Legend const lw = 160, lh = 8, lx = 20, ly = W - 30; const lg = svg.append("g").attr("transform", `translate(${lx},${ly})`); const legendScale = d3.scaleLog().domain([0.3, 1500]).range([0, lw]); for (let i = 0; i < lw; i++) { lg.append("rect") .attr("x", i) .attr("y", 0) .attr("width", 1) .attr("height", lh) .attr("fill", colorScale(legendScale.invert(i))); } [1, 10, 100, 1000].forEach((v) => { lg.append("text") .attr("x", legendScale(v)) .attr("y", lh + 11) .text(v >= 1000 ? v / 1000 + "B" : v + "M") .attr("fill", "#94a3b8") .attr("font-size", 8) .attr("text-anchor", "middle") .attr("font-family", "sans-serif"); }); lg.append("text") .attr("x", lw / 2) .attr("y", -4) .text("Population (2023)") .attr("fill", "#94a3b8") .attr("font-size", 9) .attr("text-anchor", "middle") .attr("font-family", "sans-serif"); // Auto-rotation, drag, zoom let dragging = false, autoRotate = true, sx, sy, sr; function spin() { if (autoRotate && !dragging) { rot.lon -= 0.15; render(); } requestAnimationFrame(spin); } spin(); svg.on("mousedown", (e) => { dragging = true; autoRotate = false; sx = e.clientX; sy = e.clientY; sr = { ...rot }; }); d3.select(window).on("mousemove.polished", (e) => { if (!dragging) return; const k = (0.3 * R0) / R; rot.lon = sr.lon - (e.clientX - sx) * k; rot.lat = Math.max(-80, Math.min(80, sr.lat + (e.clientY - sy) * k)); render(); }); d3.select(window).on("mouseup.polished", () => { dragging = false; }); svg.on( "wheel", (e) => { e.preventDefault(); R = Math.max(Rmin, Math.min(Rmax, R - e.deltaY * 0.3)); updateRadius(); render(); }, { passive: false } ); return svg.node(); }48:[] 43:{"id":"6b2800bcac35e5bf","slug":null,"title":"Horizon Overflow","thumbnail":"57a4f9167b536c6e0707fca3da4bec728693ba3626864a5591f08209e74a8dc9","access_level":"public","create_time":"$D2026-04-15T13:43:44.194Z","update_time":"$D2026-04-15T13:48:28.042Z","view_time":null,"first_public_time":"$D2026-04-15T13:49:51.818Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"dc97a2766ef9be06","login":"k-chat","name":"Kallol Chatterjee","avatar_url":"https://avatars-next.observableusercontent.com/f31a56f01fed3c9a0499394b5920853e37295852e119e35d12c6a0f8848a4d84","tier":"starter_2024","bio":"","following":false},"version":29,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a092fa1ed8517f3f","login":"k-chat","name":"Kallol Chatterjee","avatar_url":"https://avatars-next.observableusercontent.com/f31a56f01fed3c9a0499394b5920853e37295852e119e35d12c6a0f8848a4d84","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"a092fa1ed8517f3f","login":"k-chat","name":"Kallol Chatterjee","avatar_url":"https://avatars-next.observableusercontent.com/f31a56f01fed3c9a0499394b5920853e37295852e119e35d12c6a0f8848a4d84","tier":null,"role":"editor"},{"type":"team","id":"dc97a2766ef9be06","login":"k-chat","name":"Kallol Chatterjee","avatar_url":"https://avatars-next.observableusercontent.com/f31a56f01fed3c9a0499394b5920853e37295852e119e35d12c6a0f8848a4d84","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Horizon Overflow","cells":[{"id":0,"value":"# Horizon Overflow\nA 4-line globe projection trick\n\nOrthographic globes require clipping polygons at the horizon - D3-geo uses ~500 lines of spherical Sutherland-Hodgman for this. Here's a simpler alternative that I haven't found mentioned elsewhere, though it may well be known: **modify the projection** so back-hemisphere points project *beyond* the globe radius, then let a circular clip-path do all the work. I call it **Horizon Overflow**. The idea is simple and perhaps obvious, but I couldn't find it documented.\n\n*Drag the globe to rotate.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"# How it works\n\nIn standard orthographic projection, a back-hemisphere point at screen distance `d` from center folds **inside** the circle (`d < R`). The transformation `d → 2R − d` pushes it **outside**:\n\n- At the horizon: `d = R → 2R − R = R` - **continuous, no seam**\n- At the antipode: `d ≈ 0 → ≈ 2R` - far outside\n\nA circular `` then hides everything beyond `R`. No polygon clipping needed.\n\n~~~js\nconst cosC = sinφc * sinφ + cosφc * cosφ * Math.cos(dλ);\nif (cosC < 0) { // behind the globe?\n const d = Math.hypot(px, py) || 1; // screen distance\n const s = (2 * R - d) / d; // scale: d → 2R − d\n px *= s; py *= s; // push outside\n}\n~~~\n\nOne caveat: countries **entirely** behind the globe project as inverted shapes filling the circle. A one-line filter skips them:\n\n~~~js\nif (!polysOf(f).some(poly => poly[0].some(v => visible(...v)))) return;\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"## Limits\n\nEdge precision depends on vertex density - long edges crossing the horizon are interpolated linearly. Imperceptible at `countries-110m` resolution. Not for precision cartography. Unlike D3-geo, there is no great-circle resampling: edges between vertices are straight lines in screen space, not curved along the sphere. With dense-enough vertices this is invisible, but very coarse geometry (e.g. a 4-vertex rectangle) would show it. Works with any renderer: SVG `clipPath`, Canvas `clip()`, WebGL stencil.\n\n| | D3-geo clipping | Horizon Overflow |\n|---|---|---|\n| Code | ~500 lines | 4 lines |\n| Dependency | d3-geo | None |\n| Renderer | d3-geo pipeline | Any |\n\n---\n\n*An original idea by Jean-Luc Bloechle, implemented with the help of [Claude.ai](https://claude.ai)*\n\n*[Sugarcube Information Technology](https://sugarcube.ch) - 2026*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"world = fetch(\n \"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json\"\n).then((r) => r.json())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"countries = topojson.feature(world, world.objects.countries).features","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 44:"$43:body"