31:T16d0,interrupted_transverse_mercator_four_quadrants = { const width_quadrant = Math.round(1.138 * width / 4); const cropHeight = Math.round(height * 0.685); // Height of the cropped section const gap = 6; // Gap between quadrants const totalWidth = 4 * width_quadrant + 3 * gap + 50; const initialOffset = -((totalWidth - (width_quadrant + 3 * gap)) / 2) + 110; // Initial horizontal offset const longitude = [165+rotationDegrees, 75+rotationDegrees, -15+rotationDegrees, -105+rotationDegrees]; // Central meridian longitudes for each quadrant // Create the main canvas and context const context = DOM.context2d(totalWidth, cropHeight); // Set the main canvas size for (let i = 0; i < longitude.length; i++) { // Create an off-screen canvas for each quadrant const offScreenCanvas = document.createElement('canvas'); const offScreenContext = offScreenCanvas.getContext('2d'); offScreenCanvas.width = width; offScreenCanvas.height = height; // Define the projection for the current longitude const path = d3.geoPath(projection.rotate([longitude[i], 0]), offScreenContext); const verticalOffset = (height - cropHeight) / 2; offScreenContext.save(); offScreenContext.beginPath(); // Clip to central region offScreenContext.rect(width * (1 / 2 - width_quadrant / (2 * width)), verticalOffset, width_quadrant, cropHeight); offScreenContext.clip(); // Draw everything on the off-screen canvas offScreenContext.beginPath(); offScreenContext.globalAlpha = bkg_map_transparency; // Apply transparency path(outline); offScreenContext.fillStyle = color_ocean; // Fill the canvas with ocean color offScreenContext.fillRect(0, 0, width, height); offScreenContext.beginPath(); path(land); offScreenContext.fillStyle = color_lands; // Draw the lands offScreenContext.fill(); offScreenContext.beginPath(); path(add_lakes); offScreenContext.fillStyle = color_lakes; // Draw lakes offScreenContext.fill(); offScreenContext.beginPath(); offScreenContext.globalAlpha = 1; // No transparency for graticules path(graticule); offScreenContext.strokeStyle = color_graticule; // Draw the graticule offScreenContext.lineWidth = 0.25; offScreenContext.stroke(); offScreenContext.beginPath(); offScreenContext.rect(width * (1 / 2 - width_quadrant / (2 * width)), verticalOffset, width_quadrant, cropHeight); offScreenContext.strokeStyle = "#000"; // Draw rectangle around cropped region, black border offScreenContext.lineWidth = 3; offScreenContext.stroke(); offScreenContext.restore(); // Restore the state to remove clipping // Calculate x position including the gap const xOffset = initialOffset + i * (width_quadrant + gap); // Draw the off-screen canvas onto the main canvas with the calculated x position and vertical offset context.drawImage(offScreenCanvas, xOffset, -verticalOffset); // Create path_gore for the clipping path using offScreenContext const path_gore = d3.geoPath(projection).context(offScreenContext); // Generate the crop polygon const cropPolygon = []; const alpha = 90/2; // Longitude offset for cropping const start_latitude = -90; const end_latitude = 90; const step_latitude = 1; const length = Math.floor((end_latitude - start_latitude) / step_latitude) + 1; const latitudes = Array.from({ length }, (_, i) => start_latitude + i * step_latitude); // Add points for the left side of the polygon for (const lat of latitudes) { cropPolygon.push([-longitude[i] - alpha, lat]); } // Add points for the right side of the polygon for (const lat of latitudes.slice().reverse()) { cropPolygon.push([-longitude[i] + alpha, lat]); } // Create a Path2D object for the clipping path const clippingPath = new Path2D(); const firstPoint = projection(cropPolygon[0]); clippingPath.moveTo(firstPoint[0], firstPoint[1]); for (let i = 1; i < cropPolygon.length; i++) { const point = projection(cropPolygon[i]); clippingPath.lineTo(point[0], point[1]); } clippingPath.closePath(); // Draw the map features within the clipping path on the off-screen canvas offScreenContext.save(); offScreenContext.beginPath(); offScreenContext.clip(clippingPath); offScreenContext.fillStyle = color_ocean; // Fill the canvas with ocean color offScreenContext.fillRect(0, 0, width, height); offScreenContext.beginPath(); path_gore(outline); // Draw the map outline offScreenContext.fillStyle = color_ocean; offScreenContext.fill(); offScreenContext.beginPath(); path_gore(graticule); // Draw the graticule offScreenContext.strokeStyle = color_graticule; offScreenContext.lineWidth = 0.5; offScreenContext.stroke(); offScreenContext.beginPath(); path_gore(land); // Draw the lands offScreenContext.fillStyle = color_lands; offScreenContext.fill(); offScreenContext.beginPath(); path_gore(add_lakes); // Draw the lakes offScreenContext.fillStyle = color_lakes; offScreenContext.fill(); offScreenContext.restore(); // Draw the border around the clipping path offScreenContext.beginPath(); offScreenContext.lineWidth = 2; offScreenContext.strokeStyle = "#000"; // Black border color offScreenContext.stroke(clippingPath); // Draw the updated off-screen canvas onto the main canvas context.drawImage(offScreenCanvas, xOffset, -verticalOffset); } return context.canvas; }; 32:Ta6a,// https://observablehq.com/@mbostock/scrubber function Scrubber(values, { format = value => value, initial = 0, direction = 1, delay = null, autoplay = true, loop = true, loopDelay = null, alternate = false } = {}) { values = Array.from(values); const form = html``; let frame = null; let timer = null; let interval = null; function start() { form.b.textContent = "Pause"; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { form.b.textContent = "Play"; if (frame !== null) cancelAnimationFrame(frame), frame = null; if (timer !== null) clearTimeout(timer), timer = null; if (interval !== null) clearInterval(interval), interval = null; } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), frame = null; if (interval !== null) clearInterval(interval), interval = null; timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } form.i.oninput = event => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); Inputs.disposal(form).then(stop); return form; }33:[{"id":"5a35a251f8436ffaf8816bf04e79d4f535c20ede98cc65649fc7b1b4c5583288433695c2a0aa59473846edbcdd9331980eef177e90755557208adf086b3e19e4","href":"https://static.observableusercontent.com/files/5a35a251f8436ffaf8816bf04e79d4f535c20ede98cc65649fc7b1b4c5583288433695c2a0aa59473846edbcdd9331980eef177e90755557208adf086b3e19e4","name":"world-110m_withlakes.topo.json","type":"application/json","lastModified":1726405298639.613,"size":92469},{"id":"88c7319e70fd6af7ed36dff96f6e39837ef2a3f1733770008554268221238bef718ddbb07045a3e2b7a531f96d89877b7468facbaaf1aaee63b3a98b67b9cfbe","href":"https://static.observableusercontent.com/files/88c7319e70fd6af7ed36dff96f6e39837ef2a3f1733770008554268221238bef718ddbb07045a3e2b7a531f96d89877b7468facbaaf1aaee63b3a98b67b9cfbe","name":"land-50m.json","type":"application/json","lastModified":1726405311012.19,"size":545534},{"id":"c0edeedea555d93c867b754d8b6f680d17daa596cf2e7ac68821bc1c5dafb8bccdc602b22bd50d3e38934622d620c9b6e2bf3c183f1660f1b799b5f8a5e64254","href":"https://static.observableusercontent.com/files/c0edeedea555d93c867b754d8b6f680d17daa596cf2e7ac68821bc1c5dafb8bccdc602b22bd50d3e38934622d620c9b6e2bf3c183f1660f1b799b5f8a5e64254","name":"World_Map_Interrupted_Transverse_Mercator_Projection_Victor_Schrader.png","type":"image/png","lastModified":1726443554583.22,"size":255499}] 2f:{"title":"Interrupted Transverse Mercator Projection","cells":[{"id":1,"value":"# Interrupted Transverse Mercator Projection\n","pinned":false,"hidden":false,"mode":"md"},{"id":1171,"value":"

This notebook is inspired by a map created by Jason Davies who, in turn, drew inspiration from a proposal by Victor Schrader.\n

\n The map employs an interrupted transverse Mercator projection divided into four quadrants, each spanning 90°. The arrangement provides an expansive view of map details beyond the 90° gores, minimizing the discontinuities associated with interrupted projections.\n

\n","pinned":false,"hidden":false,"mode":"html"},{"id":1263,"value":"viewof rotationDegrees = Scrubber(angles, {loop: false, alternate: false, autoplay: false, format: d => `${d.toFixed(1)}°`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":845,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":755,"value":"

Interrupted transverse Mercator projection with central meridians ${rotationDegrees != 0 ? html`initially` : html``} positioned at 165°W, 75°W, 15°E, and 105°E.

\n
","pinned":false,"hidden":false,"mode":"html"},{"id":181,"value":"viewof color_ocean = Inputs.color({label: \"Sphere (oceans)\", value: \"#fcfcff\"});","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"viewof color_lakes = Inputs.color({label: \"Lakes color\", value: \"#c8f0ff\"});","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"viewof color_lands = Inputs.color({label: \"Lands color\", value: \"#000000\"});","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"viewof color_graticule = Inputs.color({label: \"Graticule color\", value: \"#aaaaaa\"});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1217,"value":"reference = md`---\n## Useful Reference`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1214,"value":"world_map_interrupted_transverse_mercator = html`\n

World map on an interrupted transverse Mercator projection\n
[ Source: Victor Schrader, *The American Cartographer*, Volume 16, Issue 4, 1989.]

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1227,"value":"
\nFor more information, refer to the original 1-page note:\n

Victor Schrader, “World Map on an Interrupted Transverse Mercator Projection,” \n
The American Cartographer, Volume 16, Issue 4, 1989.\n
DOI: 10.1559/152304089783813963\n

\n","pinned":false,"hidden":false,"mode":"md"},{"id":305,"value":"transverse_mercator = md`---\n## Transverse Mercator Projection`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"viewof longitude = Inputs.range([-180, 180], {value: 75, step: 5, label: \"Longitude (°)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"mercator_map = {\n const context = DOM.context2d(width+2, height+2);\n const path = d3.geoPath(projection.rotate([longitude, 0]), context);\n context.save();\n context.beginPath(), path(outline), context.clip(), context.fillStyle = color_ocean, context.fillRect(0, 0, width, height);\n context.beginPath(), path(graticule), context.strokeStyle = color_graticule, context.stroke();\n context.beginPath(), path(land), context.fillStyle = color_lands, context.fill();\n context.beginPath(), path(add_lakes), context.fillStyle = color_lakes, context.fill();\n context.restore();\n context.beginPath(), path(outline), context.strokeStyle = \"#000\", context.stroke();\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":217,"value":"width = 850","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"height = {\n const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);\n const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);\n projection.scale(projection.scale() * (l - 1) / l).precision(0.2);\n return dy;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"bkg_map_transparency = 0.08","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"meridians_density = 15","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"parallels_density = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"graticule = d3.geoGraticule().stepMinor([meridians_density,parallels_density]).stepMajor([45,80])()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"//import {d3} with {projection} from \"@d3/world-map\"\nd3 = require(\"d3@7\", \"d3-geo-projection@4\", \"d3-geo-polygon@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"projection = d3.geoTransverseMercator()","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"outline = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"world = FileAttachment(\"land-50m.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"land = topojson.feature(world, world.objects.land)","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"lakes = FileAttachment(\"world-110m_withlakes.topo.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"add_lakes = topojson.feature(lakes, lakes.objects.lakes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1266,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1269,"value":"angles = Array.from({ length: (360+7.5) / 7.5 }, (_, i) => (i * 7.5) % 360);","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}