31:T1b39,solutionCurveChart = { const canvas = document.createElement("canvas"); canvas.width = config.width; canvas.height = config.height; const ctx = canvas.getContext("2d"); const path = d3.geoPath(mapProjection, ctx); // Draw base map ctx.fillStyle = "#e8f4fc"; ctx.beginPath(); path({ type: "Sphere" }); ctx.fill(); ctx.fillStyle = "#c8dcc8"; ctx.strokeStyle = "#999"; ctx.lineWidth = 0.5; ctx.beginPath(); path(land); ctx.fill(); ctx.stroke(); // Mark land pole if (useLandWaterPoles) { const proj = mapProjection([landHemisphere.lon, landHemisphere.lat]); if (proj) { const [lx, ly] = proj; ctx.fillStyle = "#d62728"; ctx.beginPath(); ctx.arc(lx, ly, 6, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = "#333"; ctx.font = "12px sans-serif"; ctx.fillText("Land pole", lx + 10, ly + 4); } } // Draw line segments colored by average error of endpoints ctx.lineWidth = 3; for (let i = 0; i < pointsWithError.length; i++) { const a = pointsWithError[i]; const b = pointsWithError[(i + 1) % pointsWithError.length]; const projA = mapProjection([a.lon, a.lat]); const projB = mapProjection([b.lon, b.lat]); if (!projA || !projB) continue; const [x1, y1] = projA; const [x2, y2] = projB; if (Math.abs(x2 - x1) > config.width / 3) continue; const avgError = (a.error + b.error) / 2; ctx.strokeStyle = curveColorScale(avgError); ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); } // Highlight selected point const selected = pointsWithError[selectedIndex]; if (selected) { const proj = mapProjection([selected.lon, selected.lat]); if (proj) { const [x, y] = proj; ctx.fillStyle = "gold"; ctx.strokeStyle = "#333"; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(x, y, 8, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); } } // Draw hemispheres below const hemisphereY = 380; const hemisphereScale = 100; const oppositeLon = selected.lon > 0 ? selected.lon - 180 : selected.lon + 180; const oppositeLat = -selected.lat; const {ratioIn, ratioOut} = calculateHemisphereLandRatio(selected.lon, selected.lat); const waterHemisphere = { lon: landHemisphere.lon > 0 ? landHemisphere.lon - 180 : landHemisphere.lon + 180, lat: -landHemisphere.lat }; // Great circle from selected point to land pole const gcToLand = { type: "LineString", coordinates: d3.geoInterpolate( [selected.lon, selected.lat], [landHemisphere.lon, landHemisphere.lat] ) }; // Great circle from selected point to water pole const gcToWater = { type: "LineString", coordinates: d3.geoInterpolate( [selected.lon, selected.lat], [waterHemisphere.lon, waterHemisphere.lat] ) }; // Sample points along great circles function sampleGreatCircle(interpolate, n = 50) { const coords = []; for (let i = 0; i <= n; i++) { coords.push(interpolate(i / n)); } return { type: "LineString", coordinates: coords }; } const gcLandLine = sampleGreatCircle( d3.geoInterpolate([selected.lon, selected.lat], [landHemisphere.lon, landHemisphere.lat]) ); const gcWaterLine = sampleGreatCircle( d3.geoInterpolate([selected.lon, selected.lat], [waterHemisphere.lon, waterHemisphere.lat]) ); // Left hemisphere const proj1 = d3.geoOrthographic() .rotate([-selected.lon, -selected.lat]) .scale(hemisphereScale) .translate([config.width / 4, hemisphereY]); const path1 = d3.geoPath(proj1, ctx); ctx.fillStyle = "#4a90e2"; ctx.beginPath(); path1({type: "Sphere"}); ctx.fill(); ctx.fillStyle = "#90c090"; ctx.beginPath(); path1(land); ctx.fill(); // Draw great circles on left hemisphere ctx.strokeStyle = "#d62728"; ctx.lineWidth = 2; ctx.setLineDash([4, 4]); ctx.beginPath(); path1(gcLandLine); ctx.stroke(); ctx.strokeStyle = "#1f77b4"; ctx.beginPath(); path1(gcWaterLine); ctx.stroke(); ctx.setLineDash([]); // Mark poles on left hemisphere const landPoleProj1 = proj1([landHemisphere.lon, landHemisphere.lat]); if (landPoleProj1) { ctx.fillStyle = "#d62728"; ctx.beginPath(); ctx.arc(landPoleProj1[0], landPoleProj1[1], 5, 0, Math.PI * 2); ctx.fill(); } const waterPoleProj1 = proj1([waterHemisphere.lon, waterHemisphere.lat]); if (waterPoleProj1) { ctx.fillStyle = "#1f77b4"; ctx.beginPath(); ctx.arc(waterPoleProj1[0], waterPoleProj1[1], 5, 0, Math.PI * 2); ctx.fill(); } ctx.strokeStyle = "#333"; ctx.lineWidth = 1.5; ctx.beginPath(); path1({type: "Sphere"}); ctx.stroke(); // Right hemisphere const proj2 = d3.geoOrthographic() .rotate([-oppositeLon, -oppositeLat]) .scale(hemisphereScale) .translate([3 * config.width / 4, hemisphereY]); const path2 = d3.geoPath(proj2, ctx); ctx.fillStyle = "#4a90e2"; ctx.beginPath(); path2({type: "Sphere"}); ctx.fill(); ctx.fillStyle = "#90c090"; ctx.beginPath(); path2(land); ctx.fill(); // Draw great circles on right hemisphere ctx.strokeStyle = "#d62728"; ctx.lineWidth = 2; ctx.setLineDash([4, 4]); ctx.beginPath(); path2(gcLandLine); ctx.stroke(); ctx.strokeStyle = "#1f77b4"; ctx.beginPath(); path2(gcWaterLine); ctx.stroke(); ctx.setLineDash([]); // Mark poles on right hemisphere const landPoleProj2 = proj2([landHemisphere.lon, landHemisphere.lat]); if (landPoleProj2) { ctx.fillStyle = "#d62728"; ctx.beginPath(); ctx.arc(landPoleProj2[0], landPoleProj2[1], 5, 0, Math.PI * 2); ctx.fill(); } const waterPoleProj2 = proj2([waterHemisphere.lon, waterHemisphere.lat]); if (waterPoleProj2) { ctx.fillStyle = "#1f77b4"; ctx.beginPath(); ctx.arc(waterPoleProj2[0], waterPoleProj2[1], 5, 0, Math.PI * 2); ctx.fill(); } ctx.strokeStyle = "#333"; ctx.lineWidth = 1.5; ctx.beginPath(); path2({type: "Sphere"}); ctx.stroke(); // Labels ctx.fillStyle = "#333"; ctx.font = "12px sans-serif"; ctx.textAlign = "center"; ctx.fillText(`${(ratioIn * 100).toFixed(1)}% land`, config.width / 4, hemisphereY + hemisphereScale + 20); ctx.fillText(`${(ratioOut * 100).toFixed(1)}% land`, 3 * config.width / 4, hemisphereY + hemisphereScale + 20); ctx.font = "11px sans-serif"; ctx.fillStyle = "#666"; ctx.fillText( `Diff: ${(Math.abs(ratioIn - ratioOut) * 100).toFixed(2)}%`, config.width / 2, hemisphereY ); // Legend for great circles ctx.font = "10px sans-serif"; ctx.textAlign = "left"; ctx.fillStyle = "#d62728"; ctx.fillText("● to Land pole", config.width / 2 - 60, hemisphereY + hemisphereScale + 10); ctx.fillStyle = "#1f77b4"; ctx.fillText("● to Water pole", config.width / 2 - 60, hemisphereY + hemisphereScale + 25); return canvas; }32:Te6e,solutionPoints = { function dist(a, b) { return d3.geoDistance([a.lon, a.lat], [b.lon, b.lat]); } function distFromPole(p) { return d3.geoDistance([landHemisphere.lon, landHemisphere.lat], [p.lon, p.lat]); } // Generate point at given angle around pole, at given distance (radians) from pole function pointAtAngleAndDist(angle, distFromPole) { const poleLon = landHemisphere.lon * Math.PI / 180; const poleLat = landHemisphere.lat * Math.PI / 180; const theta = angle * Math.PI / 180; // Point at distance d from pole, rotated by theta const sinD = Math.sin(distFromPole); const cosD = Math.cos(distFromPole); // In pole-centered coordinates (pole at north) const x = sinD * Math.cos(theta); const y = sinD * Math.sin(theta); const z = cosD; // Rotate from pole-at-north to actual pole position const sinPoleLat = Math.sin(poleLat); const cosPoleLat = Math.cos(poleLat); const xE = cosPoleLat * x + sinPoleLat * z; const yE = y; const zE = -sinPoleLat * x + cosPoleLat * z; // Rotate around z-axis by poleLon const xF = xE * Math.cos(poleLon) - yE * Math.sin(poleLon); const yF = xE * Math.sin(poleLon) + yE * Math.cos(poleLon); const zF = zE; // Convert back to lat/lon const lat = Math.asin(Math.max(-1, Math.min(1, zF))) * 180 / Math.PI; const lon = Math.atan2(yF, xF) * 180 / Math.PI; return {lon, lat}; } // Find optimal distance from pole at given angle function findBestAtAngle(angle) { let bestDist = Math.PI / 2; // start at 90° (the equator) let bestError = 1; // Coarse search for (let d = 0.3; d < Math.PI - 0.3; d += 0.05) { const p = pointAtAngleAndDist(angle, d); const {diff} = calculateHemisphereLandRatio(p.lon, p.lat); if (Math.abs(diff) < bestError) { bestError = Math.abs(diff); bestDist = d; } } // Fine search for (let d = bestDist - 0.05; d <= bestDist + 0.05; d += 0.005) { if (d < 0.1 || d > Math.PI - 0.1) continue; const p = pointAtAngleAndDist(angle, d); const {diff} = calculateHemisphereLandRatio(p.lon, p.lat); if (Math.abs(diff) < bestError) { bestError = Math.abs(diff); bestDist = d; } } const p = pointAtAngleAndDist(angle, bestDist); return {...p, angle, distFromPole: bestDist, error: bestError}; } // First pass: sweep all angles let points = []; for (let angle = 0; angle < 360; angle += 3) { const pt = findBestAtAngle(angle); points.push(pt); if (angle % 15 === 0) yield points; } yield points; // Second pass: fill gaps by angle const maxIterations = 200; const targetPoints = 500; for (let iter = 0; iter < maxIterations && points.length < targetPoints; iter++) { // Sort by angle points.sort((a, b) => a.angle - b.angle); // Find largest angular gap let maxGap = 0; let maxIdx = 0; for (let i = 0; i < points.length; i++) { const j = (i + 1) % points.length; let gap = points[j].angle - points[i].angle; if (gap < 0) gap += 360; if (gap > maxGap) { maxGap = gap; maxIdx = i; } } if (maxGap < 2) break; // dense enough // Add point at midpoint angle const a = points[maxIdx]; const b = points[(maxIdx + 1) % points.length]; let midAngle = a.angle + maxGap / 2; if (midAngle >= 360) midAngle -= 360; const newPt = findBestAtAngle(midAngle); points.push(newPt); yield points; } // Final sort points.sort((a, b) => a.angle - b.angle); yield points; }33:Tc16,drawHemispheres = function(container, point) { container.selectAll("*").remove(); if (!point) { container.append("text") .attr("x", config.width / 2) .attr("y", 100) .attr("text-anchor", "middle") .attr("font-size", 14) .text("← Click a point on the curve above"); return; } const oppositeLon = point.lon > 0 ? point.lon - 180 : point.lon + 180; const oppositeLat = -point.lat; // Get both ratios from one call const {ratioIn, ratioOut} = calculateHemisphereLandRatio(point.lon, point.lat); // Debug display container.append("text") .attr("x", config.width / 2) .attr("y", -30) .attr("text-anchor", "middle") .attr("font-size", 11) .attr("fill", "#666") .text(`Debug — This: ${(ratioIn*100).toFixed(2)}% | Opposite: ${(ratioOut*100).toFixed(2)}% | Diff: ${((ratioIn-ratioOut)*100).toFixed(2)}%`); // Title container.append("text") .attr("x", config.width / 2) .attr("y", 20) .attr("text-anchor", "middle") .attr("font-size", 14) .text("The great circle dividing these two hemispheres splits land/water equally"); // Left hemisphere const proj1 = d3.geoOrthographic() .rotate([-point.lon, -point.lat]) .scale(120) .translate([200, 160]); const path1 = d3.geoPath(proj1); container.append("path").datum({type: "Sphere"}).attr("fill", "#4a90e2").attr("d", path1); container.append("path").datum(land).attr("fill", "#90c090").attr("d", path1); container.append("path").datum({type: "Sphere"}).attr("fill", "none").attr("stroke", "#333").attr("stroke-width", 1.5).attr("d", path1); container.append("text") .attr("x", 200).attr("y", 300) .attr("text-anchor", "middle").attr("font-size", 12) .text(`Center: ${point.lon.toFixed(1)}°, ${point.lat.toFixed(1)}°`); container.append("text") .attr("x", 200).attr("y", 318) .attr("text-anchor", "middle").attr("font-size", 12).attr("font-weight", "bold") .text(`${(ratioIn * 100).toFixed(1)}% land`); // Divider container.append("text") .attr("x", config.width / 2).attr("y", 160) .attr("text-anchor", "middle").attr("font-size", 24) .text("÷"); // Right hemisphere const proj2 = d3.geoOrthographic() .rotate([-oppositeLon, -oppositeLat]) .scale(120) .translate([760, 160]); const path2 = d3.geoPath(proj2); container.append("path").datum({type: "Sphere"}).attr("fill", "#4a90e2").attr("d", path2); container.append("path").datum(land).attr("fill", "#90c090").attr("d", path2); container.append("path").datum({type: "Sphere"}).attr("fill", "none").attr("stroke", "#333").attr("stroke-width", 1.5).attr("d", path2); container.append("text") .attr("x", 760).attr("y", 300) .attr("text-anchor", "middle").attr("font-size", 12) .text(`Center: ${oppositeLon.toFixed(1)}°, ${oppositeLat.toFixed(1)}°`); container.append("text") .attr("x", 760).attr("y", 318) .attr("text-anchor", "middle").attr("font-size", 12).attr("font-weight", "bold") .text(`${(ratioOut * 100).toFixed(1)}% land`); }34:T4bc,landGrid = { const {gridWidth, gridHeight} = config; const canvas = document.createElement('canvas'); canvas.width = gridWidth; canvas.height = gridHeight; const ctx = canvas.getContext('2d'); // White background ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, gridWidth, gridHeight); // Correct scale for equirectangular: width should span 360°, height 180° const projection = d3.geoEquirectangular() .scale(gridHeight / Math.PI) .translate([gridWidth / 2, gridHeight / 2]); const path = d3.geoPath(projection, ctx); ctx.fillStyle = '#000'; ctx.beginPath(); path(land); ctx.fill(); const imageData = ctx.getImageData(0, 0, gridWidth, gridHeight); const data = imageData.data; const points = []; for (let y = 0; y < gridHeight; y++) { const lat = 90 - (y + 0.5) * (180 / gridHeight); const weight = Math.cos(lat * Math.PI / 180); for (let x = 0; x < gridWidth; x++) { const lon = (x + 0.5) * (360 / gridWidth) - 180; const i = (y * gridWidth + x) * 4; const isLand = data[i] < 128; points.push({lon, lat, isLand, weight, lonRad: lon * Math.PI / 180, latRad: lat * Math.PI / 180}); } } return points; }35:[] 2f:{"title":"The median hemispheres","cells":[{"id":0,"value":"# The median hemispheres\n\nThe [land and water hemispheres](https://observablehq.com/@toja/land-and-water-hemispheres) are well known -- there is a single point in the south Pacific that defines a hemisphere which is almost 90% water; while the hemisphere centered on its antipode is almost half land.\n\nI think there is another set of hemispheres, though, that are more ordinary and never discussed -- those where the land/water proportion are *exactly the same* as for the planet as a whole. That is -- the earth is 29% land, and there are many hemispheres that are *themselves* 29% land.\n\nThey lie, as far as I can tell, on an irregularly shaped band that sweeps around the globe, spending some time on land and some time on water.\n\nAs people who think in terms of calculus point out, the central limit theorem proves that such a band exists.","pinned":false,"hidden":false,"mode":"md"},{"id":222,"value":"viewof selectedIndex = Inputs.range([0, solutionPoints.length - 1], {\n step: 1, \n value: 0, \n label: \"Position on curve\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"viewof useLandWaterPoles = Inputs.toggle({label: \"Use Land/Water poles\", value: false})","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"I have a lot of questions about this band. \n* Does this band itself spend 29% of its time on land, or more?\n* Is there a definite way to calculate it? I (and, full disclosure, Claude Opus 4.5) have only found some rough approximations.\n* From a distance, it looks to be smooth. Is it? Or if you were to go into just the parts that go through, say, Georgia, would it waver back and forth?\n* What are the guarantees about such a band existing on all possible arrangements of land?\n* How would it move if we adjusted it for plate tectonics?\n* What are the interesting locations that it intersects with other points?","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"world = await fetch(\n \"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json\"\n).then((response) => response.json())","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"land = topojson.feature(world, world.objects.land)","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"optimal = {\n let best = {lon: 0, lat: 0, diff: 1};\n \n for (let lon = -180; lon < 180; lon += config.searchStep) {\n for (let lat = -85; lat <= 85; lat += config.searchStep) {\n const {diff} = calculateHemisphereLandRatio(lon, lat);\n if (Math.abs(diff) < Math.abs(best.diff)) {\n best = {lon, lat, diff};\n }\n }\n }\n \n return best;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"mutable selectedPoint = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"refinePoint = function (lon, lat) {\n for (let i = 0; i < config.refineMaxIter; i++) {\n const { diff } = calculateHemisphereLandRatio(lon, lat);\n if (Math.abs(diff) < config.refineTolerance) break;\n\n const { diff: dLon } = calculateHemisphereLandRatio(\n lon + config.refineDelta,\n lat\n );\n const { diff: dLat } = calculateHemisphereLandRatio(\n lon,\n lat + config.refineDelta\n );\n\n const gradLon = (dLon - diff) / config.refineDelta;\n const gradLat = (dLat - diff) / config.refineDelta;\n const gradMag = Math.sqrt(gradLon * gradLon + gradLat * gradLat);\n\n if (gradMag > 0.0001) {\n lon -= ((diff * gradLon) / gradMag) * config.refineStep;\n lat -= ((diff * gradLat) / gradMag) * config.refineStep;\n lat = Math.max(-89, Math.min(89, lat));\n }\n }\n\n const { ratioIn } = calculateHemisphereLandRatio(lon, lat);\n return { lon, lat, landRatio: ratioIn };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":225,"value":"mapProjection = useLandWaterPoles\n ? d3.geoMollweide()\n .rotate([-landHemisphere.lon, -landHemisphere.lat + 90, 0])\n .scale(150)\n .translate([config.width / 2, (config.height - 250) / 2])\n : d3.geoMollweide()\n .rotate([0, 0, 0])\n .scale(150)\n .translate([config.width / 2, (config.height - 300) / 2])","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"pointsWithError = solutionPoints.map((p) => {\n const { diff } = calculateHemisphereLandRatio(p.lon, p.lat);\n return { ...p, error: Math.abs(diff) };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"curveColorScale = {\n const maxError = d3.max(pointsWithError, (d) => d.error);\n return d3.scaleSequential(d3.interpolateRdYlGn).domain([maxError, 0]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"d3 = require(\"d3@7\", \"d3-geo-projection@4\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"config = ({\n stepSize: 15,\n maxPoints: 50,\n width: 960,\n height: 700,\n refineStep: 0.1,\n refineDelta: 0.02,\n refineMaxIter: 500,\n refineTolerance: 0.0002,\n gridWidth: 270,\n gridHeight: 135,\n searchStep: 15\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"totalLandCheck = {\n let totalLand = 0;\n let totalWeight = 0;\n \n for (const p of landGrid) {\n totalWeight += p.weight;\n if (p.isLand) totalLand += p.weight;\n }\n \n return {\n landPercent: (totalLand / totalWeight * 100).toFixed(2),\n totalPoints: landGrid.length,\n landPoints: landGrid.filter(p => p.isLand).length\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"function calculateLandArea(center) {\n const projection = d3.geoOrthographic()\n .rotate([-center[0], -center[1]])\n .precision(0.05);\n \n const path = d3.geoPath(projection);\n \n // Calculate visible land area\n let landArea = 0;\n \n // For each land feature, calculate area if visible from this hemisphere\n land.features.forEach(feature => {\n const area = path.area(feature);\n landArea += area;\n });\n \n return landArea;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"calculateHemisphereLandRatio = function(lon, lat) {\n const lonRad = lon * Math.PI / 180;\n const latRad = lat * Math.PI / 180;\n const cosLat = Math.cos(latRad);\n const sinLat = Math.sin(latRad);\n \n let landIn = 0, totalIn = 0;\n let landOut = 0, totalOut = 0;\n \n for (const p of landGrid) {\n const cosDist = sinLat * Math.sin(p.latRad) + cosLat * Math.cos(p.latRad) * Math.cos(p.lonRad - lonRad);\n \n if (cosDist >= 0) {\n totalIn += p.weight;\n if (p.isLand) landIn += p.weight;\n } else {\n totalOut += p.weight;\n if (p.isLand) landOut += p.weight;\n }\n }\n \n const ratioIn = landIn / totalIn;\n const ratioOut = landOut / totalOut;\n \n return {ratioIn, ratioOut, diff: ratioIn - ratioOut};\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":201,"value":"landHemisphere = ({lon: -1.6, lat: 47.2}) // near Nantes, France\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":203,"value":"waterHemisphere = ({lon: 178.4, lat: -47.2}) // antipode in Pacific\n","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}