31:T6cf,# Earth Gravitational Model EGM2008 The Earth Gravitational Model 2008 (EGM2008) is a high-resolution representation of Earth's gravitational field, providing detailed insights into gravity variations across the globe. The map below visualizes the **EGM2008 geoid height model**, which shows how the **geoid** — the equipotential surface of Earth's gravity field — varies in height relative to a reference ellipsoid. The geoid serves as a reference for determining altitudes and can be thought of as an **extension of the mean sea level** (MSL) beneath the continents. Geoid height (also known as geoid undulation or geoid anomaly), measured in meters, reflects the deviation between Earth's actual gravitational potential compared to the theoretical ellipsoid. Contour lines with negative values (represented by blue curves) show regions where the geoid is below the reference ellipsoid, indicating that the gravitational potential is lower in these areas compared to the global average. The lowest geoid height is found in the Indian Ocean, near the southern tip of Sri Lanka. This geoid anomaly (or gravity hole) is called Indian Ocean Geoid Low (IOGL). *Note: The geoid height map should not be confused with the gravity anomaly map, which provides the actual variations in Earth's gravity field (see, for example, WGM2012).*
32:T12f4,map = { const scale = map_width / width; const svg = d3.select(DOM.svg(scale * width, scale * (height+10))) .attr("viewBox", `0 0 ${width} ${height+10}`) .style("border", "1px solid #aaa") .style("background-color", "white"); const path = d3.geoPath().projection(projection); // Add base layers const addBaseLayer = (datum, fill, fillOpacity, stroke, strokeWidth) => { svg.append("path") .datum(datum) .attr("d", path) .attr("fill", fill) .attr("fill-opacity", fillOpacity) .attr("stroke", stroke) .attr("stroke-width", strokeWidth || 0) .attr("clip-path", "url(#clip-map)"); }; addBaseLayer({ type: "Sphere" }, "#00d", 0.05); addBaseLayer(land, "#b0b0b0", 0.4, "#99988d", 0.5); addBaseLayer(lakes, "#E5EFEF", 0.8); addBaseLayer(graticule, "none", 1, "#ccc", 0.5); // Add clipping at the bottom svg.append("defs").append("clipPath") .attr("id", "clip-map") .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height-30); // Add contours with masks const addContoursWithMask = (dataRange, strokeWidth, strokeColor) => { const g = svg.append("g") .selectAll(".contour") .data(projectedContours(dataRange)) .enter() .append("path") .attr("class", "contour") .attr("d", path) .attr("stroke-width", strokeWidth) .style("stroke", strokeColor) .attr("fill", "none") .attr("clip-path", "url(#clip-map)"); // Create a mask for contours const contourMask = svg.append("defs").append("mask") .attr("id", `contour-mask-${strokeColor}`); // Add mask background contourMask.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .attr("fill", "white"); // Append label backgrounds with rounded corners to the mask labels.forEach(({ x, y, text, angle }) => { const projectedPoint = projection([x, y]); const textWidth = text.length * (labelSize * scale * 0.6); const textHeight = labelSize * scale; contourMask.append("rect") .attr("x", projectedPoint[0] - textWidth / 2) .attr("y", projectedPoint[1] - textHeight / 2) .attr("width", textWidth) .attr("height", textHeight) .attr("rx", 10) // Rounded corners (adjust as needed) .attr("ry", 10) // Rounded corners (adjust as needed) .attr("transform", `rotate(${angle}, ${projectedPoint[0]}, ${projectedPoint[1]})`) .attr("fill", "black"); // Mask area for labels }); // Apply the mask to the contours g.attr("mask", `url(#contour-mask-${strokeColor})`); return g; }; // Add contours for declination ranges const declinationRanges = [ { range: d3.range(-180, 0, 2), strokeWidth: 0.25, color: "blue" }, { range: d3.range(-180, 0, 10), strokeWidth: 0.5, color: "blue" }, { range: d3.range(180, 0, -2), strokeWidth: 0.25, color: "red" }, { range: d3.range(180, 0, -10), strokeWidth: 0.5, color: "red" }, { range: [0], strokeWidth: 2, color: "green", dashArray: "8,5" } ]; declinationRanges.forEach(({ range, strokeWidth, color, dashArray }) => { const contour = addContoursWithMask(range, strokeWidth, color); if (dashArray) contour.attr("stroke-dasharray", dashArray); }); // Add the outer stroke for the globe boundary svg.append("path") .datum({ type: "Sphere" }) .attr("d", path) .attr("fill", "none") .attr("stroke", "#aaa") .attr("stroke-width", 4) .attr("clip-path", "url(#clip-bottom)") // Add text labels labels.forEach(({ x, y, text, angle }) => { const projectedPoint = projection([x, y]); svg.append("text") .attr("x", projectedPoint[0]) .attr("y", projectedPoint[1]) .attr("text-anchor", "middle") .style("dominant-baseline", "middle") .attr("transform", `rotate(${angle}, ${projectedPoint[0]}, ${projectedPoint[1]})`) .style("stroke", "white") .style("stroke-width", `${5*scale}px`) .style("stroke-opacity", labelBackgroundOpacity) .style("paint-order", "stroke") .style("fill", "black") .style("font-size", `${labelSize * scale}px`) .text(text) .attr("clip-path", "url(#clip-map)"); }); // Add a title const title_graph = svg.append("g") title_graph.append("text") .text("Geoid Undulation: Geoid Height (in Meters) Relative to the Reference Ellipsoid. [Model EGM 2008]") .attr('x', width / 2) .attr("text-anchor", "middle") .attr('y', height - 5) .attr('class', 'map_title') .attr('font-weight', 500); return svg.node(); }; 33:T6b3,// Based on https://observablehq.com/@fil/contour-labels-svg function labelsContours(threshold, labelSpacing) { const results = []; const contours = d3.contours().size([rawData.gridWidth, rawData.gridHeight]); const selected_contours = contours.contour(rawData.data, threshold); selected_contours.coordinates.forEach(polygon => polygon.forEach((ring, j) => { const p = ring.slice(1, Infinity), possibilities = d3.range(labelSpacing, labelSpacing * 1.4), scores = possibilities.map(d => -((p.length - 1) % d)), n = possibilities[d3.scan(scores)], start = 1 + (d3.scan(p.map(xy => (j === 0 ? -1 : 1) * xy[1])) % n), margin = 2; p.forEach((xy, i) => { if ( i % n === start && xy[0] > margin && xy[0] < rawData.gridWidth - margin && xy[1] > margin && xy[1] < rawData.gridHeight - margin ) { const a = (i - 2 + p.length) % p.length, b = (i + 2) % p.length; const dx = p[b][0] - p[a][0]; const dy = p[b][1] - p[a][1]; if (dx === 0 && dy === 0) return; let angle = Math.atan2(-dy, dx); angle += Math.cos(angle) < 0 ? Math.PI : 0; angle *= 180/Math.PI, results.push({ text: `${threshold > 0 ? "+" : ""}` + threshold, x: initialProjection.invert(xy)[0], y: initialProjection.invert(xy)[1], angle: parseFloat(angle.toFixed(2)) }); } }); }) ); return results; };34:[{"id":"88c7319e70fd6af7ed36dff96f6e39837ef2a3f1733770008554268221238bef718ddbb07045a3e2b7a531f96d89877b7468facbaaf1aaee63b3a98b67b9cfbe","href":"https://static.observableusercontent.com/files/88c7319e70fd6af7ed36dff96f6e39837ef2a3f1733770008554268221238bef718ddbb07045a3e2b7a531f96d89877b7468facbaaf1aaee63b3a98b67b9cfbe","name":"land-50m.json","type":"application/json","lastModified":1728993969802.854,"size":545534},{"id":"5a35a251f8436ffaf8816bf04e79d4f535c20ede98cc65649fc7b1b4c5583288433695c2a0aa59473846edbcdd9331980eef177e90755557208adf086b3e19e4","href":"https://static.observableusercontent.com/files/5a35a251f8436ffaf8816bf04e79d4f535c20ede98cc65649fc7b1b4c5583288433695c2a0aa59473846edbcdd9331980eef177e90755557208adf086b3e19e4","name":"world-110m_withlakes.topo.json","type":"application/json","lastModified":1728993969802.854,"size":92469},{"id":"c81f0dc5ce58dc2372ebd013a812654cacca25e21c53fce15d41eb52bf9e40e3f008bbbc8b66fb9315150190c4203d195166a4b527e007ad61edecb7ae18a982","href":"https://static.observableusercontent.com/files/c81f0dc5ce58dc2372ebd013a812654cacca25e21c53fce15d41eb52bf9e40e3f008bbbc8b66fb9315150190c4203d195166a4b527e007ad61edecb7ae18a982","name":"EGM2008_1degree_grid.csv","type":"text/csv","lastModified":1729004410990.008,"size":462335}] 2f:{"title":"Earth Gravitational Model EGM2008","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":10844,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":10231,"value":"---\n### Map Adjustment Parameters","pinned":false,"hidden":false,"mode":"md"},{"id":5200,"value":"viewof selected_projection = Inputs.select(projections, {\n label: \"Select a Projection\",\n format: d => d.name,\n value: projections.find(p => p.name === \"Miller\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10462,"value":"viewof labelSize = Inputs.range([6, 15], {value: 8.5, step: 0.5, label: html`Label text height
(in pixels)`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10919,"value":"viewof labelBackgroundOpacity = Inputs.range([0, 1], {value: 0.2, step: 0.05, label: html`Label background opacity`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":11032,"value":"
\n

${viewof labelSpacing}

\n Average: ${labelsPerContour} label${labelsPerContour > 1 ? \"s\" : \"\"}/contour\n

","pinned":false,"hidden":false,"mode":"html"},{"id":10940,"value":"viewof labelLatMax = Inputs.range([50, 90], {value: 75, step: 5, label: html`Don't display labels
above north Lat. (°)`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10944,"value":"viewof labelLatMin = Inputs.range([-90, -50], {value: -70, step: 5, label: html`Don't display labels
below south Lat. (°)`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5446,"value":"viewof map_width = Inputs.range([700, 1150], {value: 1100, step: 50, label: htl.html`Map width
(size in pixels)`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10008,"value":"
\n

\n ${DOM.download(() => serialize(map), \"EGM2008_\" + selected_projection.name, \"Save as SVG\")}\n

\n ${DOM.download(() => rasterize(map), \"EGM2008_\" + selected_projection.name, \"Save as PNG\")}\n

\n \n You can save the displayed map in either SVG or PNG format.\n
To save it as PNG, the original SVG map is first converted to a canvas format. \n
For PNG, please follow these steps:\n

Click “Save as PNG” to initiate the conversion.
Click “Download” to retrieve the PNG file.

\n \n

","pinned":false,"hidden":false,"mode":"html"},{"id":122,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":11125,"value":"### Additional Definitions","pinned":false,"hidden":false,"mode":"md"},{"id":924,"value":"width = 960","pinned":false,"hidden":false,"mode":"ojs"},{"id":922,"value":"height = 650","pinned":false,"hidden":false,"mode":"ojs"},{"id":10323,"value":"viewof labelSpacing = Inputs.range([10, 150], {value: 45, step: 5, label: html`Label spacing parameter`})","pinned":true,"hidden":false,"mode":"ojs"},{"id":11030,"value":"labelsPerContour = Math.round(labels.length/thresholds.length)","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"### Data File\n*See the* ᥫ *files pane*","pinned":false,"hidden":false,"mode":"md"},{"id":5883,"value":"file = await FileAttachment(\"EGM2008_1degree_grid.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"rawData = file.csv({ array: true }).then(rows => {\n const flatLength = rows.flat().length;\n const numberOfLines = rows.length;\n\n return Object({\n \"gridWidth\": flatLength/numberOfLines,\n \"gridHeight\": numberOfLines,\n \"data\": rows.flat().map(x => parseFloat(x)),\n })\n \n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":8721,"value":"initialProjection = d3.geoIdentity().translate([rawData.gridWidth / 2, rawData.gridHeight / 2]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":11296,"value":"### Contour","pinned":false,"hidden":false,"mode":"md"},{"id":1861,"value":"contours = thresholds => \n d3.contours()\n .size([rawData.gridWidth, rawData.gridHeight])\n .thresholds(thresholds)(rawData.data);","pinned":false,"hidden":false,"mode":"ojs"},{"id":8718,"value":"function projectContour(contour) {\n return {\n type: contour.type,\n value: contour.value,\n coordinates: contour.coordinates.map(polygon => \n polygon.map(line => \n line.map(point => { return initialProjection.invert(point); })\n )\n )\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8723,"value":"projectedContours = thresholds => contours(thresholds).map(projectContour);","pinned":false,"hidden":false,"mode":"ojs"},{"id":11413,"value":"### Contour Labels","pinned":false,"hidden":false,"mode":"md"},{"id":10326,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":10317,"value":"thresholds =d3.range(-100,110, 10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":10321,"value":"baseLabels = thresholds.flatMap(threshold => labelsContours(threshold, labelSpacing))","pinned":false,"hidden":false,"mode":"ojs"},{"id":10527,"value":"labels = {\n return baseLabels\n .filter(label => Math.abs(label.x) <= 170 && label.y >= labelLatMin && label.y <= labelLatMax)\n .map(label => ({\n ...label,\n angle: label.angle\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11415,"value":"### Map Projection","pinned":false,"hidden":false,"mode":"md"},{"id":5202,"value":"projections = [\n {name: \"Aitoff\", value: d3.geoAitoff().scale(140)},\n {name: \"Ginzburg V\", value: d3.geoGinzburg5()}, \n {name: \"Equirectangular\", value: d3.geoEquirectangular().scale(150)},\n {name: \"Mercator\", value: d3.geoMercator().scale(153.5)},\n {name: \"Miller\", value: d3.geoMiller().scale(153.5)},\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":5118,"value":"projection = selected_projection.value.translate([width/2,height/2]); ","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"### TopoJSON Mesh and Loaded Files\n*See the* ᥫ *files pane*","pinned":false,"hidden":false,"mode":"md"},{"id":5085,"value":"graticule = d3.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs"},{"id":4554,"value":"//world = d3.json(\"https://unpkg.com/world-atlas@1/world/110m.json\")\nworld = FileAttachment(\"land-50m.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":4556,"value":"land = topojson.feature(world, world.objects.land)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5649,"value":"worldWithLakes = FileAttachment(\"world-110m_withlakes.topo.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":5652,"value":"lakes = topojson.feature(worldWithLakes, worldWithLakes.objects.lakes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"### Libraries and Variables","pinned":false,"hidden":false,"mode":"md"},{"id":6672,"value":"// https://observablehq.com/@mbostock/saving-svg\nserialize = {\n const xmlns = \"http://www.w3.org/2000/xmlns/\";\n const xlinkns = \"http://www.w3.org/1999/xlink\";\n const svgns = \"http://www.w3.org/2000/svg\";\n return function serialize(svg) {\n svg = svg.cloneNode(true);\n const fragment = window.location.href + \"#\";\n const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT);\n while (walker.nextNode()) {\n for (const attr of walker.currentNode.attributes) {\n if (attr.value.includes(fragment)) {\n attr.value = attr.value.replace(fragment, \"#\");\n }\n }\n }\n svg.setAttributeNS(xmlns, \"xmlns\", svgns);\n svg.setAttributeNS(xmlns, \"xmlns:xlink\", xlinkns);\n const serializer = new window.XMLSerializer;\n const string = serializer.serializeToString(svg);\n return new Blob([string], {type: \"image/svg+xml\"});\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6681,"value":"// https://observablehq.com/@mbostock/saving-svg\nfunction rasterize(svg) {\n let resolve, reject;\n const promise = new Promise((y, n) => (resolve = y, reject = n));\n const image = new Image;\n image.onerror = reject;\n image.onload = () => {\n const rect = svg.getBoundingClientRect();\n const context = DOM.context2d(rect.width, rect.height);\n context.drawImage(image, 0, 0, rect.width, rect.height);\n context.canvas.toBlob(resolve);\n };\n image.src = URL.createObjectURL(serialize(svg));\n return promise;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"d3 = require(\"d3@5\", \"d3-geo-projection@3\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}