41:null 42:["$","title",null,{"children":"Horizon Overflow | sugarcube | Observable"}] 48:T9d1,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(); }49:Tc38,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(); }4a:T1f7f,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(); }4b:[] 46:{"id":"bddd0a269a2c5aeb","slug":"globe","title":"Horizon Overflow","thumbnail":"ee5e6fe251c7fcabe3946ff1974ca6c04e7d8c499152197a778d378490612636","access_level":"public","create_time":"$D2026-02-22T07:25:55.297Z","update_time":"$D2026-04-14T17:20:50.502Z","view_time":null,"first_public_time":"$D2026-02-22T07:27:59.315Z","has_unpublished_edits":null,"fork":false,"stars":20,"starred":false,"owner":{"type":"team","id":"3fca74a1da208b1e","login":"sugarcube","name":"sugarcube","avatar_url":"https://avatars-next.observableusercontent.com/a43c75c3f1b763829ce88d76ee0a66af0da87628664cc0f1479c52aa7fcb8498","tier":"starter_2024","bio":"","following":false},"version":151,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"279c7e66f19c15aa","login":"jean-luc-bloechle","name":"Jean-Luc Bloechle","avatar_url":"https://avatars-next.observableusercontent.com/c034fb4df2eed48dee2f029dbce3206509b5da2f01f2011e31671c9fa402a9b2","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"279c7e66f19c15aa","login":"jean-luc-bloechle","name":"Jean-Luc Bloechle","avatar_url":"https://avatars-next.observableusercontent.com/c034fb4df2eed48dee2f029dbce3206509b5da2f01f2011e31671c9fa402a9b2","tier":null,"role":"editor"},{"type":"team","id":"3fca74a1da208b1e","login":"sugarcube","name":"sugarcube","avatar_url":"https://avatars-next.observableusercontent.com/a43c75c3f1b763829ce88d76ee0a66af0da87628664cc0f1479c52aa7fcb8498","tier":"starter_2024","role":"editor"}],"comments":[{"id":"bb9ca1b2aad2a9b2","reply_to_id":null,"content":"The map is incorrect.\nCrimea - is a part of Ukraine, not Russia","create_time":"$D2026-05-20T22:21:30.149Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"f82ce24f4a714703","login":"sen77","name":"Sergey","avatar_url":"https://avatars-next.observableusercontent.com/ff385ac81064057be9381383331d822a84edd7bf5093c56d8025c59300eb1005","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Horizon Overflow","cells":[{"id":21,"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":23,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"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":27,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"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":85,"value":"## Full demo\n\nSame technique, now with a population choropleth, ocean gradients, atmospheric glow, auto-rotation, drag and scroll-to-zoom.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":101,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"world = fetch(\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json\").then(r => r.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"countries = topojson.feature(world, world.objects.countries).features","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 47:"$46:body"