31:T17ad,interrupted_transverse_Hammer_four_quadrants = { const scaling = 0.64 const width_quadrant = width*0.55; const cropHeight = height*0.64; // Height of the cropped section const gap = 18; // Gap between quadrants const totalWidth = 4 * width_quadrant + 3 * gap + 20; const initialOffset = -width_quadrant/2 + 40; // 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*scaling+5, cropHeight*scaling+5); // Set the main canvas size context.scale(scaling, scaling); // scale the entire content down by the scaling factor 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, 90]), 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/scaling; 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 = 2/scaling; 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.globalAlpha = bkg_map_transparency; 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.globalAlpha = 1; offScreenContext.strokeStyle = color_graticule; offScreenContext.lineWidth = 0.5/scaling; 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/scaling; 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":1726673215462.792,"size":92469},{"id":"88c7319e70fd6af7ed36dff96f6e39837ef2a3f1733770008554268221238bef718ddbb07045a3e2b7a531f96d89877b7468facbaaf1aaee63b3a98b67b9cfbe","href":"https://static.observableusercontent.com/files/88c7319e70fd6af7ed36dff96f6e39837ef2a3f1733770008554268221238bef718ddbb07045a3e2b7a531f96d89877b7468facbaaf1aaee63b3a98b67b9cfbe","name":"land-50m.json","type":"application/json","lastModified":1726673215462.792,"size":545534}] 2f:{"title":"Interrupted Transverse Hammer Projection (vs Transverse Sinusoidal)","cells":[{"id":1,"value":"# Interrupted Transverse Hammer Projection (vs Transverse Sinusoidal)\n","pinned":false,"hidden":false,"mode":"md"},{"id":1171,"value":"

This notebook is inspired by a proposal from Victor Schrader (Interrupted Transverse Mercator Projection). \nIn this version, other projections can be selected and used in place of the transverse Mercator projection.\n

\n The following map employs an interrupted ${selected_projection.name} 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":1731,"value":"viewof selected_projection = Inputs.select(projections, {\n label: \"Select a projection\",\n format: d => d.name,\n value: projections.find(p => p.name === \"Transverse Hammer (B=2)\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"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 ${selected_projection.name} 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":305,"value":"transverse_projection = md`---\n## ${selected_projection.name} 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":"transverse_sinusoidal_map = {\n const scaling = 0.4\n const context = DOM.context2d(width*scaling, height*scaling); // reduce width and height by a scaling factor\n const path = d3.geoPath(projection.rotate([longitude, 0, 90]), context);\n\n context.scale(scaling, scaling); // scale the entire content down by the scaling factor\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.beginPath(), path(outline), context.strokeStyle = \"#000\", context.lineWidth = 1.5/scaling, 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 = 800","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":1734,"value":"projections = [\n {name: \"Transverse Hammer (B=1.5)\", value: d3.geoHammerRaw(1.5)},\n {name: \"Transverse Hammer (B=2)\", value: d3.geoHammerRaw(2)},\n {name: \"Transverse Hammer (B=4)\", value: d3.geoHammerRaw(4)}, \n {name: \"Transverse Hammer (B=∞)\", value: d3.geoHammerRaw(Infinity)}, \n {name: \"Transverse Sinusoidal\", value: d3.geoSinusoidalRaw}\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"projection = d3.geoProjection(selected_projection.value).rotate([0, 0, 90]).angle(-90) ","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"}