30:T4ac,tiled = { await visibility(); const context = DOM.context2d(width, 2.75 * height); context.fillStyle = "white"; context.fillRect(0, 0, width, 2.75 * height); context.translate(width / 2, height / 2); context.scale(0.5, 0.5); context.fillStyle = "#000"; const projection = tetrahedralMarkley() .fitSize([width, height], { type: "Sphere" }) .center([20, 0]) .translate([0, 0]); const path = d3.geoPath(projection, context); for (let i = -2; i <= 1; i++) { for (let j = 0; j <= 2; j++) { context.save(); context.translate((i + (j % 2) / 2) * width, 2 * j * height); for (const [r, x, y] of [[Math.PI, -width * 0.25, -height], [0, 0, 0]]) { context.save(); context.translate(x, y); context.rotate(r); context.scale(1, 1.001); // avoids a subpixel gap where the map is cut (Antarctica, Kamtchatka) context.beginPath(); path(land); context.fill(); context.beginPath(); context.lineWidth = 0.25; path(d3.geoGraticule10()); context.stroke(); context.restore(); yield context.canvas; } context.restore(); } } }31:T56b,diagram = { await visibility(); const projection = d3.geoTetrahedralLee().rotate(rotate); const context = DOM.context2d(width, height * 0.9); context.scale(0.8, 0.8); context.translate(width * 0.1, height * 0.1); context.fillStyle = "white"; context.fillRect(0, 0, width, height); const path = d3.geoPath(projection, context); projection .center(d3.geoRotation(projection.rotate())([20, 0])) .translate([0, 0]) .scale(height * 0.476); for (const [r, x, y, c] of [ [0, 0, 0, "green"], [Math.PI, -width * 0.25, -height, "red"], [0, -width, 0, "blue"], [Math.PI, width * .75, -height, "orange"] ]) { context.save(); context.translate(width / 2, height / 2); context.fillStyle = context.strokeStyle = c; context.translate(x, y); context.rotate(r); context.beginPath(); context.globalAlpha = 0.1; path({ type: "Sphere" }); context.fill(); context.globalAlpha = 1; context.beginPath(); path(land); context.fill(); context.beginPath(); context.lineWidth = 0.5; path(d3.geoGraticule10()); context.stroke(); context.beginPath(); context.lineWidth = 1.5; path({ type: "Sphere" }); context.stroke(); context.restore(); } context.strokeStyle = "#000"; context.lineWidth = 4; context.strokeRect(0, 0, width, height); return context.canvas; }32:T440,{ const projection = d3 .geoOrthographic() .rotate([160, -15]) .fitSize([width, 500], { type: "Sphere" }); const context = DOM.context2d(width, 500); const path = d3.geoPath(projection, context); function render() { context.clearRect(0, 0, width, 500); context.strokeStyle = context.fillStyle = "#000"; context.beginPath(); path({ type: "Sphere" }); context.stroke(); context.clip(); context.beginPath(); path(land); context.fill(); const graticule = d3.geoGraticule10(); context.beginPath(); context.lineWidth = 0.25; path(graticule); context.stroke(); context.beginPath(); path({ type: "LineString", coordinates: clipPolygon(0.01).coordinates[0] }); context.lineWidth = 1; context.strokeStyle = "green"; context.stroke(); context.beginPath(); path({ type: "MultiPoint", coordinates: vertices }); context.fillStyle = "red"; context.fill(); } return d3 .select(context.canvas) .call(drag(projection).on("drag.render", render)) .call(render) .node(); }33:[{"id":"d668259ba58bde6484cc7052a08bd77de8cdb289cb6063b77420a49baa912a5e35077e584ea3cfcfe2ffd4b7843363a3324b682addb8288356556f37774bfbc3","href":"https://static.observableusercontent.com/files/d668259ba58bde6484cc7052a08bd77de8cdb289cb6063b77420a49baa912a5e35077e584ea3cfcfe2ffd4b7843363a3324b682addb8288356556f37774bfbc3","name":"Tetrahedral map projection with appendix.pdf","type":"application/pdf","lastModified":1603738241252.797,"size":4629849},{"id":"55e399574bb7f7fa960350486478562f5fd312cd8e52aba34abac2a1a3ab9dba057b49aa8250d566d00cfc4289199cc54947146fa808a0ecd659654034e246a1","href":"https://static.observableusercontent.com/files/55e399574bb7f7fa960350486478562f5fd312cd8e52aba34abac2a1a3ab9dba057b49aa8250d566d00cfc4289199cc54947146fa808a0ecd659654034e246a1","name":"matlab.zip","type":"application/zip","lastModified":1603739726878.538,"size":47071}] 2e:{"title":"Markley’s tetrahedral map","cells":[{"id":0,"value":"md`# Markley’s tetrahedral map\n\nF. Landis Markley’s projection (1982) —see [PDF](#PDF) below— is an aspect of the conformal projection in a tetrahedron proposed by Hermann A. Schwarz in 1869 and [Laurence P. Lee](https://visionscarto.net/projection-de-lee) in 1965. It is designed in a way that limits the distortion of land features. The four vertices of the tetrahedron are in the ocean, and the full earth is rendered in a rectangle. The projection was designed as an alternative to [Guyou’s](https://observablehq.com/@d3/guyou).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1323,"value":"{\n const height = width * sqrt3_4;\n\n const context = DOM.context2d(width, height);\n context.fillStyle = \"white\";\n context.fillRect(0, 0, width, height);\n\n const projection = tetrahedralMarkley().fitSize([width, height], {\n type: \"Sphere\"\n });\n\n const path = d3.geoPath(projection, context);\n\n context.fillStyle = context.strokeStyle = \"black\";\n\n context.beginPath();\n path(land);\n context.fill();\n\n context.beginPath();\n context.lineWidth = 0.25;\n path(d3.geoGraticule10());\n context.stroke();\n\n context.beginPath();\n context.lineWidth = 2;\n context.strokeStyle = \"#000\";\n path({ type: \"Sphere\" });\n context.stroke();\n\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1303,"value":"md`The map’s aspect ratio is ${tex`\\sqrt{3}/4`}:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1679,"value":"sqrt3_4 = sqrt(3) / 4","pinned":true,"hidden":false,"mode":"ojs"},{"id":1725,"value":"height = width * sqrt3_4","pinned":true,"hidden":false,"mode":"ojs"},{"id":1803,"value":"md`The map is organized on a tetrahedron, and thus has 4 singularities, placed far enough from the land:\n> “at latitudes ±35.26439° ${tex`= ± \\frac12 \\cos^{-1}(\\frac13)`}, with the northern ones at longitudes 25° W and 155° E and the southern ones at longitudes 115° W and 65° E.”`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1580,"value":"vertices = [\n [-25, acos(1 / 3) * .5 * degrees],\n [155, acos(1 / 3) * .5 * degrees],\n [-115, -acos(1 / 3) * .5 * degrees],\n [65, -acos(1 / 3) * .5 * degrees]\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1661,"value":"md`---\nThis projection can be tiled, resulting in a beautiful infinite conformal wallpaper.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1230,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1669,"value":"md`The diagram below shows its construction as the juxtaposition of four copies of tetrahedralLee, with the proper spherical rotation and planar transform:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1097,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1756,"value":"rotate = [115, acos(1 / 3) * .5 * degrees - 90, 180]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1574,"value":"md`### Clipping polygon\n\nTo properly clip the geographic shapes (lines and polygons), we need to do an inverse projection of the bounding rectangle, to spherical coordinates. We show the result in green on the globe below, with a bit of exaggeration of the “gap”—the actual clipping polygon is tighter.\n\nNote how it does (and MUST do) a U-turn on each of the 4 singular points (in red), since the total angular excess of the sphere (4π) is concentrated in these 4 points.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1437,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1746,"value":"md`## Code for the projection\n\nThe projection is defined by two elements:\n1. the raw projection, which uses geoTetrahedralLee under the hood, then reassembles the pieces (cut from the colored triangles) into the rectangle. It includes the inverse raw projection.\n2. The clipping polygon, in spherical coordinates. It is computed by the inverse projection of selected points along the edge of the polygon. The selection was made as a balance between precision (more edges give better results) and speed (less edges is faster).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1749,"value":"tetrahedralMarkley = () =>\n d3.geoProjection(tetrahedralMarkleyRaw)\n .preclip(d3.geoClipPolygon(clipPolygon()))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1742,"value":"tetrahedralMarkleyRaw = {\n const rawLee = d3\n .geoTetrahedralLee()\n .rotate(rotate)\n .fitExtent([[-4, -1.5 / sqrt3_4], [4, 1.5 / sqrt3_4]], {\n type: \"Sphere\"\n });\n\n const forward = (l, p) => {\n let [x, y] = rawLee([l * degrees, p * degrees]);\n if (y < 0) {\n x = -x - 4;\n if (x < -5) x += 8;\n y = -y;\n }\n if (x > 3) x -= 8;\n return [x, -y];\n };\n\n // see the diagram for colors\n forward.invert = (x, y) => {\n const a =\n rawLee.invert([x, -y]) || // green\n (x > 0 && rawLee.invert([4 - x, y])) || // orange\n (x < 0 && rawLee.invert([-4 - x, y])) || // red\n (x < 0 && rawLee.invert([8 + x, -y])); // blue\n\n if (a) return [a[0] * radians, a[1] * radians];\n };\n\n return forward;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1423,"value":"clipPolygon = e => {\n const raw = tetrahedralMarkleyRaw;\n if (e === undefined) e = .001;\n const lin = (s, e, n) => d3.range(n).map(i => s + ((e - s) * i) / n);\n const x0 = -7 + e;\n const x1 = 1 - e;\n const y0 = e;\n const y1 = 1.5 / sqrt3_4 - e;\n const ring = []\n .concat(\n lin(y0, y1, 38).map(y => [x0, y]),\n lin(x0, x1, 9).map(x => [x, y1]),\n lin(y1, y0, 38).map(y => [x1, y]),\n lin(x1, x0, 9).map(x => [x, y0])\n )\n .map(d => raw.invert(...d).map(d => d * degrees));\n ring.push(ring[0]);\n return {\n type: \"Polygon\",\n coordinates: [ring]\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1928,"value":"PDF = md`---\n## Markley’s paper\n\nWith this notebook, we are publishing Dr. F. Landis Markley’s paper describing the projection’s history and concept, as well as the original matlab code used to generate the maps in the PDF. Download or read below.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1940,"value":"viewof url = visibility().then(async () =>\n Object.assign(\n html`

🅿🅳🅵 Tetrahedral map projection with appendix.pdf`,\n    {\n      value: FileAttachment(\n        \"Tetrahedral map projection with appendix.pdf\"\n      ).url()\n    }\n  )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1971,"value":"viewof zip = visibility().then(async () =>\n  Object.assign(\n    html`🅼 matlab.zip`,\n    {\n      value: FileAttachment(\"matlab.zip\").url()\n    }\n  )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"md`-----\n_Technical zone_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"land = d3.json(\n  \"https://unpkg.com/visionscarto-world-atlas@0.0.4/world/110m_land.geojson\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@7\", \"d3-geo-polygon@^1.12.1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1090,"value":"import { acos, degrees, radians, sqrt } from \"@fil/math\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1866,"value":"import { drag } from \"@d3/versor-dragging\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}